joppot

コピペで絶対動く。説明を妥協しない

プログラミング

How to change the language form “en-US” to “en” by wordpres bogo

投稿日:2017年3月29日 更新日:



Abstract

Hello everyone, It’s me candle.
In this time, I will show you to customize bogo plugins.
The bogo is wonderful plugin which can adapt the wordpress site to many languages as a simple.
but, there is a problem that you can’t choose general English.

When writing English articles, you may not always have to write it limited to country.
However, you can choose ‘en-UK’, ‘en-CA’ and ‘en-US’, but ‘en’ can not be chosen in bogo.

I checked the source code.
The bogo got a language list from wordpress function, and there is no general English in it.
So I used this method which select “en-US” language and replace the string to “en” when it is displayed.

It may be fixed in future development.

It is described that it is also possible for google’s official to choose ‘en’ for language.

https://support.google.com/webmasters/answer/189077?hl=en


Related article

Customize wordpress bogo plugin’s short code

Precondition

Bogo plugin has been installed to wordpress.
You can edit wordpress theme.



Find out where en-US is displayed

First we find out where en-US is displayed
Open the web inspector ( development tool ) on the page translated to English in your blog.
Search “en-US” against DOM.

The first thing we can see is the lang value of the html tag.

<!DOCTYPE html>
<!–[if lt IE 7]>
<html class=”ie6″ lang=”en-US”> <![endif]–>
<!–[if IE 7]>
<html class=”i7″ lang=”en-US”> <![endif]–>
<!–[if IE 8]>
<html class=”ie” lang=”en-US”> <![endif]–>
<!–[if gt IE 8]><!–>
<html lang=”en-US”>

Next, we can see the “alternate” value of link tag in the header tag.

<link rel=”alternate” hreflang=”en-US” href=”http://localhost:8080/alice_blog/wp/en/2017/03/26/33/” />
<link rel=”alternate” hreflang=”ja” href=”http://localhost:8080/alice_blog/wp/2016/02/14/23/” />

The last one has en-US with class attribute at body tag, but even if you do not change it there is nothing to do with SEO.
You don’t change it.

In summary, you need to change the value of “lang” in html tag and the value of “alternate” from en-US to en


Chnage the lang value of html tag

For changing “lang” value of html tag, I refer to the following site.
https://wordpress.org/support/topic/how-to-change-the-hreflang-annotation-and-the-lang-attribute-from-en-us-to-en/

Open the functions.php in the your theme folder. If it isn’t, you make it.
It is generally in the following places.

wp-content/themes/”theme name”/functions.php

After open it, write this.

add_filter( 'language_attributes', 'language_attributes_fix' );
function language_attributes_fix( $language_attributes ) {
  return str_replace('en-US','en', $language_attributes);
}

Save it and check the blog again.
It turns to lang=”en”.


Change the value of alternate

Let’s change the value of alternate to en.
Write this code in the same functions.php.

add_filter( 'bogo_rel_alternate_hreflang', 'bogo_rel_alternate_hreflang_fix' );
function bogo_rel_alternate_hreflang_fix($languages) {
 foreach ($languages as $key => $language ) {
   $languages[$key]["hreflang"] = str_replace('en-US', "en", $language["hreflang"]);
 }
 return $languages;
}

To enhance the versatility of this source code, we loop “$languages” with foreach to replace all languages.
If you know where the location of “en-US” in the $languages array, the next code is better performance than before.

function bogo_rel_alternate_hreflang_fix($languages) {
$languages[1][“hreflang”] = str_replace(‘en-US’, “en”, $languages[1][“hreflang”]);
return $languages;
}

Please be careful, if you add or remove the translation language, the “en-US” position would be changed,.

The alternate value turns to en.

It’s over.

Conclusion

The displayed language in this way could be changed from en-US to en.

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

React Project development environment building command create-react-app is too convenient

English 日本語 Abstract Hello everyone It’s me candle. In this time we will build a “react” development environment with create-react-app command and try to hello world. Past react development was created by installing babel and other packages from npm on your own using gulp or webpack. Past react development installed babel and other packages from npm and built servers with gulp and webpack. If you use the create-react-app command, you can create react environment easily. Let’s do it. Precondition Node is already installed

I created docker shortcut command with bash alias

Abstract Hello everyone it’s me candle. I will introduce easy operation of the docker command. Of course, I just created it thinking that it was useful, so please change it for much more useful. Precondition You use bash. ( Even though you use zsh or csh or something else, you edit a bit, it will work well) You use docker

React creates dummy data using Faker.js

Abstract Hello everyone it’s me candle. Let’s try to use Faker.js in React. I think that there are various purposes for using Faker.js. In many cases you will use it for testing, but this time I’d like to create a dummy react state using Faker.js. Condition You have a basic react skill create-react-app was installed Create new project First of all, create a react project. Execute the below command in your favorite directory and create a new react project. create-react-app faker-demo cd faker-demo Installation of faker Install faker with this coommand. yarn add –dev faker it’s over. Generate dummy data …

Use react-simple-format in React web

Abstract Hello everyone it’s me candle. In this article we will use simple-format in react. Simple format is famous for Ruby on Rails and is commonly used. React has a legacy react-simple-format and 16g’s made. The legacy lib is not useful, so I choose 16g’s made. https://github.com/16g/react-simple-format Condition Nothing Create project If you already have a React project please use it. If not, use the following command to create it. create-react-app simple_format_sample cd simple_format_sample How to use react-simple-format First install it. yarn add @16g/react-simple-format Open a appropriate component file. I write it in src/App.js. import React, { Component } from …

Create the simplest drop down menu in React

Abstract Hello everyone it’s me candle. In this time we will make a most simple drop down menu. Condition Knowledge of react Preparation We create a react project with the below command. create-react-app hello-menu Open src/App.js and write this. import React, { Component } from 'react' class App extends Component { render() { return ( <div> <p>hello menu</p> </div> ) } } export default App Create a components directory in the src directory. mkdir src/components Create a DropDownMenu.js file in the src/components directory. touch src/components/DropDownMenu.js Now on ready. Create a Drop down menu Open the src/components/DropDownMenu.js and write these. import …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.