It’s easy with such a plug-in! Although it seems to be said, there is a high possibility that a plug-in will end if the plug-in does not support it in the future without knowing the mechanism, so I dare not have a plug-in this time. I decided to make it with.

The English version of this site (Japanese site) created using the method of this article is here (only arbitrary pages are translated into English, and 90% or more of the power of Google Translate is used for English sentences. Created and operated).

The following requirements and conditions are met when constructing the English site introduced in this article.

• Install another site for English in the subdirectory of the Japanese site you have created so far
• Manually port the settings of the site that was operated in Japanese
• Display a button if there is an English page (same for English sites)
• I’m not good at English sentences, so for the time being, copy the Japanese page and translate it into English sentence by sentence with a translation tool

This is an introductory article that you make every time and make trial and error, so if you are interested, please read on.

It seems that the multilingual plug-in does the same thing, but this article was done on this site (the site I manage), and the English site is introduced by the method introduced. Even if you build (a secondary site in another language), we cannot guarantee that it will be properly recognized by search engines.
Please refer to “How to check if a page is recognized as a multilingual page” at the end of the sentence to verify whether the page is recognized as a multilingual page by the method in this article.

Install new WordPress in a subdirectory

It can be automatic or manual, so install a new WordPress in a subdirectory. I can explain how to do it, but please understand that I will not introduce it for the following reasons.

Subdirectory? Install? If you do not understand it, you may destroy the existing site, so unfortunately you should give up at this stage.

If you use the Japanese version, you can set the language (the screen that clicks “Settings”) to English, and if you use the English version, you can set the administrator user’s language to Japanese. , WordPress itself can be either English or Japanese.

Strictly speaking, there may be a difference, but we have not verified it to that extent. In my case, I installed the Japanese version and set it to English.

Environment porting of Japanese site

WordPress itself and theme plugins are tools originally made in English-speaking countries, so I think there is no problem, but third-party themes and plugins that only support Japanese cannot be used in English (many by themselves). It is possible if it is verbalized).

If you are using something that can only be used in Japanese on a Japanese site, you will have to multilingualize it or use something other than the theme / plugin (one that can be used in English), so be prepared in advance. Must be kept.

After installing the English site, go through the themes and their settings, the required plugins and their settings one by one.

It may seem difficult to manually port it, but if you open the Japanese and English pages in a separate tab and copy it, it will not be a particularly difficult task.

Migration of articles to be translated into English

First of all, I can not understand the atmosphere of the site at all unless I create some articles, so I will port some articles to the English site and make it as a display test.

If you want to port (copy) all articles, either export / import all posts (note that images will not be passed if the export / import function is limited to articles), or copy files / folders and databases. However, I personally think that the latter is easier. After making a copy site, don’t forget to change the URL of the internal link and internal image.

If this is also a completely independent site, downloading the image from the Japanese site and uploading it to the English site … would be a difficult task, but like me, “Japanese site” If the main thing is to make only the ones that should be in English, on the English site, then you don’t need to go that far.

If you want to selectively acquire images from the parent site (Japanese site), it will be easy to use the 「Bulk Attachment Download」 plug-in.

Please note that the “Bulk Attachment Download” plugin will give an error in PHP 8.0.

All independent! If you are aiming for, you can also get media files at once with the “Export Media Library” plug-in.

However, since it is necessary to set the featured image for each site, it is better to port it from a Japanese site or create a new one and upload it.

Copying articles is easy (I have the impression that it’s even easier with the block editor). Open the edit screen of the article to be translated into English, copy all the blocks, and paste it on the edit screen of the English site. You can also create categories and tags as needed.

For those that are internal links in the Japanese site, the links to the pages of the Japanese site are treated as “external links”, so you need to rewrite them as appropriate (especially if you are using an Embed card, “external links”. Will not be converted into a card, so check before publishing)

So far, it doesn’t require much skill, so it’s okay if you do it steadily. Rather, the hard part starts here.

Make a description to inform that there is an English page (Japanese page)

Perhaps (not beyond my imagination), even if you leave the English site as it is, the search engine crawler will crawl over time, and from the language tag and content of the header, “Because it is an English page, let’s index it as an English page.” I think that it will be gradually recognized in the flow.

However, if possible, I think it would be faster for search engines to recognize each of the Japanese and English pages by letting them know that “This page has pages in different languages!”.

There are pages in other languages! To let us know, put the following in the header of a page that has pages in other languages:

<link rel="alternate" href="Japanese Page URL" hreflang="ja" />
<link rel="alternate" href="English Page URL" hreflang="en" />

Furthermore, even if it is written in English or Japanese, pages with the same content will exist, so so that search engines do not mistakenly recognize it as “duplicate content”, both Japanese and English sites It will be perfect if you put a canonical tag that tells you that the Japanese site is the original site!

<link rel="canonical" href="Japanese Page URL" />

It may have already been output by the theme or SEO plugin, so you need to check the source and adjust it so that it is appropriate.

There is a problem here! With this method, there is no “English page” that is the same as the “Japanese page” (or responds according to a fixed rule), so outputting this tag to all pages will cause inconvenience.

In short, the search engine says “There is an English page!” And “There is a Japanese page!”, And when the search engine crawler visits, such a page does not occur. It’s unclear how this will affect page ratings, but I’d like to avoid it if possible.

In order to solve this, it is necessary to devise together with the contents of the next section.

Setting to semi-automatically notify that there is an English page for a Japanese page

This is the most important part of this article, and I think it is the most difficult part of this customization, and it is an important part of properly communicating information to search engines, so please understand it well and proceed.

The following content is when an English site (secondary site) is added to a subdirectory on the same domain while a Japanese site already exists (there is a main site), so if the situation is different, it is necessary to change accordingly Please note that there is.

Handling of canonical tags

You may not know if you are posting casually in WordPress, but usually on the html of each page, a Canonical tag that informs the search engine that “This is the correct URL for this page” Is output. An example is as follows.

<link rel="canonical" href="URL of the page" />

Look for this tag by right-clicking on some page → “View Source”.

If the Canonical tag doesn’t exist in the first place, regardless of whether you use the method in this article, you should always output it from the viewpoint of SEO that conveys accurate information to the search engine.

If this tag is on the English site side (secondary site side), it will be recognized as a site with independent content, and the pages will be duplicated (because the content is the same) on the Japanese and English pages. Therefore, the Canonical tag output on the English site side will be stopped. The main site (Japanese site) does not need to stop because it is the original URL.

The output of Canonical tags is done by the theme plugin, and it varies depending on the site, so please refer to the manual of the theme plugin and set it on your own site.

Output settings on the secondary site (English site) side

On the secondary site side, it is necessary to tell the search engine the following contents (specify in html).

• This page is for English-speaking countries
• There must be a Japanese page with the same content on this page
• The main page of this page is a Japanese page (= Canonical tag)
• If only English pages exist, the main page is an English page (= Canonical tag)

※The last item was originally made as an English version of a Japanese site, but if there are articles only for English-speaking countries, this page will only be an English page! It will inform you.

Then, in the above information, create the information that cannot be pulled automatically by using the custom field.

Since it is easier to leave the creation, modification, and update of custom fields to the plug-in, I used “Custom Field Suite” this time.

All you need is the “Japanese page URL”. (Create a custom field called “cf_japanese_url”).

After creating the custom field, add the following code to the functions.php of the theme you have enabled.

/**** Multi-language header output (secondary site) ****/
function hab_add_multi_lang_header_child(){
//Variable setting
	global $wp_query;
	$postID = $wp_query->post->ID;
	$ha_mlang_customfield = get_post_meta($postID, 'cf_japanese_url', true);
	$ha_ima_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
//Other than posts / fixed pages
	if(!is_singular()){
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
//When there is an input in cf_japanese_url on the post / fixed page
	}elseif($ha_mlang_customfield){
		echo '<link rel="alternate" href="' .$ha_mlang_customfield. '" hreflang="ja" />';
		echo '<link rel="alternate" href="' .$ha_ima_url. '" hreflang="en" />';
		echo '<link rel="canonical" href="' .$ha_mlang_customfield. '" />';
//When there is no input in cf_japanese_url on the post / fixed page
	}else{
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
	}
}
add_action('wp_head', 'hab_add_multi_lang_header_child',1);

[A brief description of the code]

The inserted code is built with the following mechanism, so please check it while comparing.

1. Set the global function etc. to get the information of the article (post) outside the loop
2. Process only for individual posts / fixed pages (is_singular)
3. Leave Canonical tags on English site pages except for individual posts and fixed pages
4. In individual posts / fixed pages, the conditions are divided according to the existence of a value in the custom field (cf_japanese_url) extracted by 1 (judgment that only English pages exist if there is no value)
5. If a value exists in the custom field (cf_japanese_url), “Japanese page URL” and “English page URL” are output, and “Japanese page” is specified in the Canonical tag.
6. If the value does not exist in the custom field (cf_japanese_url), specify “English page” in the Canonical tag and output.

At first I wrote a lot of messy code, but in the end it seemed that this requirement could be met, so the above code is organized.

In the above code, PHP 8.0 may give a warning “PHP Warning: Attempt to read property” ID “on null in …”. If you use it in PHP8.0 environment, please use the following code (the result will be the same), although it will be a little complicated.

In addition to the code in this article, if you get a warning “PHP Warning: Attempt to read property” ID “on null in …” in PHP8.0, see “Attempt to read in PHP8.0″. Property “○○” on null in… “Warning (warning)” Verification and countermeasures (example) “.

/**** Multi-language header output (secondary site) ****/
function hab_add_multi_lang_header_child(){
//Front page, archive page
if(!is_singular() || is_front_page()){
	$ha_ima_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];	
	echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
}
	
//All posts and fixed pages except the front page on fixed pages
if(is_singular() && !is_front_page()){
	//Variable setting
	global $post;
	$ha_mlang_customfield = get_post_meta($post_id, 'cf_japanese_url', true);
	$ha_ima_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
	
if(empty($ha_mlang_customfield)){
//If there is no input in cf_japanese_url
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
}else{

//If there is input in cf_en_url
		echo '<link rel="alternate" href="' .$ha_mlang_customfield. '" hreflang="ja" />';
		echo '<link rel="alternate" href="' .$ha_ima_url. '" hreflang="en" />';
		echo '<link rel="canonical" href="' .$ha_mlang_customfield. '" />';
}
	}
}

add_action('wp_head', 'hab_add_multi_lang_header_child',1);

Output settings on the main site (Japanese site) side

The items that need to be output on the main site side (Japanese site side) are as follows.

• This page is for Japanese-speaking countries
• There must be an English page with the same content on this page
• The main page must be a Japanese page (= Canonical tag)

Also on the Japanese site, use the “Custom Field Suite” plugin to create a custom field (referred to as “cf_en_url” in this article) to specify the URL of the English page.

After creating the custom field, add the following code to the functions.php of the enabled theme.

/**** Multi-language header output (main site) ****/
function hab_add_multi_lang_header_parent(){
//Variable setting
	global $wp_query;
	$postID = $wp_query->post->ID;
	$ha_mlang_customfield = get_post_meta($postID, 'cf_en_url', true);
	$ha_ima_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
//Other than posts / fixed pages
	if(!is_singular()){
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
//When there is an input in cf_en_url on the post / fixed page
	}elseif($ha_mlang_customfield){
		echo '<link rel="alternate" href="' .$ha_mlang_customfield. '" hreflang="en" />';
		echo '<link rel="alternate" href="' .$ha_ima_url. '" hreflang="ja" />';
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';
//When there is no input in cf_japanese_url on the post / fixed page
	}else{
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
	}
}
add_action('wp_head', 'hab_add_multi_lang_header_parent',1);

What we are doing is almost the same as the English site side, but the big difference is that the output URL of the Canonical tag remains the Japanese page even if there is a value on the custom field side.

In the above code, PHP 8.0 may give a warning “PHP Warning: Attempt to read property” ID “on null in …”. If you use it in PHP8.0 environment, please use the following code (the result will be the same), although it will be a little complicated.

/**** Multi-language header output (main site) ****/
function hab_add_multi_lang_header_parent(){
//Front page, archive page
if(!is_singular() || is_front_page()){
	$ha_ima_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];	
	echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
}

//All posts and fixed pages except the front page on fixed pages
if(is_singular() && !is_front_page()){
	//Variable setting
	global $post;
	$ha_mlang_customfield = get_post_meta($post->ID, 'cf_en_url', true);
	$ha_ima_url=(empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
	
if(empty($ha_mlang_customfield)){
//If there is no input in cf_japanese_url
	echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
}else{

//If there is input in cf_en_url	
		echo '<link rel="alternate" href="' .$ha_mlang_customfield. '" hreflang="en" />';
		echo '<link rel="alternate" href="' .$ha_ima_url. '" hreflang="ja" />';
		echo '<link rel="canonical" href="' .$ha_ima_url. '" />';	
}
	}
}

add_action('wp_head', 'hab_add_multi_lang_header_parent',1);

At this point, you have implemented the functionality that meets the requirements of your multi-language site.

If you write an article, you might think, “Well, just create a custom field and write instructions in the theme’s functions.php”, but you can copy the code, but what’s on your important site? Make sure you understand what you are doing.

Create buttons and links to move to the Japanese ← → English page

After that, if you create both transition buttons such as “There is an English page” on the Japanese page with the English page and “There is a Japanese page” on the English page with the Japanese page, it is completed! It means that.

As a really simple question personally, English-speaking people will only see English pages, and Japanese-speaking people will only see Japanese pages, so I thought it was unnecessary, but for the time being, install it. I made it.

We will also work on the “Japanese site (main site)” and the “English site (secondary site)” separately.

Settings on the secondary site (English site) side

Add the following code to the functions.php of the theme that enables it.

/***** Transition link to Japanese page *****/
function hab_parent_page_link(){
//Variable setting
	global $wp_query;
	$postID = $wp_query->post->ID;
	$ha_mlang_customfield = get_post_meta($postID, 'cf_japanese_url', true);
	if(!is_singular()){
	}elseif($ha_mlang_customfield){
		echo '<div class="lang-button"><a href="' .$ha_mlang_customfield. '" target="blank">日本語ページを見る</a></div>';	
	}	
}
add_shortcode('parent-link', 'hab_parent_page_link');

What we are doing with the above code is an individual page (post / fixed page), and if there is a value in the custom field (cf_japanese_url), the value in the custom field (URL of the Japanese page) is displayed as a link. Make a short code to do.

The link will be a simple text link, so add the following code to the theme “Additional CSS”.

/***** Language change button (other language page transition button) *****/
.lang-button {
    border: 2px solid #222;
    border-radius: 4px;
    text-align: center;
    padding: 4px;
	margin:8px;
}

.lang-button a {
    text-decoration: none;
    color: #222;
    font-size: 1.2em;
}

.lang-button a:hover {
    color: #777;
}

After that, insert the following shortcode into the custom HTML widget and you’re done.

[parent-link]

Settings on the main site (Japanese site) side

As with the secondary site, add the following to the functions.php of the enabled theme.

/***** Transition link to English page *****/
function hab_child_page_link(){
//Variable setting
	global $wp_query;
	$postID = $wp_query->post->ID;
	$ha_mlang_customfield = get_post_meta($postID, 'cf_en_url', true);
	if(!is_singular()){
	}elseif($ha_mlang_customfield){
		echo '<div class="lang-button"><a href="' .$ha_mlang_customfield. '" target="blank">View English Page</a></div>';	
	}	
}
add_shortcode('child-link', 'hab_child_page_link');

Similarly, add the following to the “Additional CSS” of the theme.

/***** Language change button (other language page transition button) *****/
.lang-button {
    border: 2px solid #222;
    border-radius: 4px;
    text-align: center;
    padding: 4px;
	margin:8px;
}

.lang-button a {
    text-decoration: none;
    color: #222;
    font-size: 1.2em;
}

.lang-button a:hover {
    color: #777;
}

Also, insert the following shortcode into your custom HTML widget as well.

[child-link]

Now you have a link button to “Japanese page”-> “English page”, “English page”-> “Japanese page”.

How to check if it is recognized as a multilingual page

To check if the multilingual page is properly recognized, open “Previous Tools and Reports” from the menu on the left side of the management screen of Google Search Console, click “International Targeting”, and on the screen that appears. confirm.

The timing when Google recognizes the existence of a multilingual page will be after the next search engine crawler visits after setting the multilingual page, so it may take some time depending on the site.

By the way, this site was also created on May 21, 2021, and 2 articles (3 articles including this article) have been published for the time being, so as of May 22, 2021, it is still recognized as a multi-language page. Not (well, I think it’s only one day). Regarding the progress, I will add it to this page when I feel like it (if I notice it …).

Later: If you are on the same site, it may be easier to use a plug-in …

I’m sorry to have read this far, but if you simply want to multilingualize the site that is currently running, it may be overwhelmingly easier to add functions with the famous plugins that appear when you search.

Creating a separate site, setting it up, and creating an English article … is a difficult task.

However, plugins do not work on all WordPress sites around the world without problems, so problems may occur immediately after installation, and it is necessary to confirm what to do in the following cases. In particular, I think you should be careful about multilingualization. If you want to go safely, it is safer to boil down at a test site or a fledgling site before you go.

• How to leave (restore) when it is no longer needed after installation? Is it easy to put it back?
• What if I’m using a custom post type and it doesn’t work?
• What should I do if the site performance is degraded due to the addition of functions?
• What to do if the plugin author becomes unable to support future versions due to unforeseen circumstances?

The method I introduced this time is to create another WordPress in a subdirectory and connect independent sites, so there is almost no problem with the above items (in other words, another site will work). So, maybe the server load will increase …).

Especially if you want to leave, restore the settings (delete functions.php and CSS, restore the output of Canonical tag), delete the English site created as a secondary site, and you’re done! Therefore, you don’t have to worry about unnecessary information remaining on the main site like a plugin (you can delete the value of the custom field by using “Delete Custom Fields” etc. ).

2021524 Addendum

When I checked it with Google Search Console, it was properly recognized as hreflang (with language setting). I think it depends on the site, but it is recognized earlier than expected.

The page that I used as a reference

In creating this article and the functions of this article, I referred to the following pages.

• 多言語サイトはrel=”altrenate” hreflang=”x”で管理しよう
• WordPressのループ外で現在のページURLを取得する方法
• [WordPress]ループ外でカスタムフィールドの値を取得する記述