Hueman

Huemanの個別記事ページを日本語化する方法

hueman-thumbnail

今回の記事では、無料WordPressテーマ:Huemanのカスタマイズについて紹介したいと思います。

この Hueman というテーマ、とても高機能で至れり尽くせりなんですが、気になりやすいのが、英語で表示される箇所がある、ということだと思います。

「Tags:」などは英語のままで良いとしても、関連記事を表示させる「You may also like…」のような、もろに英語な場所は、できれば日本語で表示させたいですよね。

今回の記事では、そんな Hueman の個別記事の①〜④部分(下の画像)を日本語にする方法を紹介していきます。

今回のカスタマイズ

↓ 下の画像の①〜④を日本語化していきます。

hueman-single-before

↓ WordPress公式サイト:Hueman
https://ja.wordpress.org/themes/hueman/

注意点

ここではPHPファイルを編集していくので、FTPを使ってバックアップを取った上で編集してもらいたいと思いますが、それ以外に、今回の方法は「アップデートすると英語に戻ってしまう」という点にも注意が必要です。

アップデートをしないのも良くないので、うまくバランスを取りながらの対応をお願いします。

[ad]

①著者を表示する「By 」部分を日本語化

それでは個別記事のページを日本語化していきましょう。
まずは個別記事のタイトル下に表示される「By」という文字を、「投稿者: 」にしてみたいと思います。

個別記事を表示しているのは親テーマの single.php なので、この中の14行目付近にある、

<p class="post-byline"><?php _e('by','hueman'); ?> <?php the_author_posts_link(); ?> · <?php the_time(get_option('date_format')); ?></p>

というコードを、以下のコードで置き換えます。

<p class="post-byline">投稿者: <?php the_author_posts_link(); ?> · <?php the_time(get_option('date_format')); ?></p>

これで「By」の文字が日本語になりました。

hueman-single-after-author

①-1. 投稿者を非表示にするには

投稿者を非表示にするには、先ほどの

<p class="post-byline"><?php _e('by','hueman'); ?> <?php the_author_posts_link(); ?> · <?php the_time(get_option('date_format')); ?></p>

というコードから

<?php _e('by','hueman'); ?> <?php the_author_posts_link(); ?> · 

部分を削除すれば良いので、投稿者を非表示にすると14行目のコードは以下のようになります。

<p class="post-byline"><?php the_time(get_option('date_format')); ?></p>

①-2. 投稿日を非表示にするには

投稿日を非表示にする方法については、下のコードで表示しているので、これを消去すれば非表示になります。

<?php the_time(get_option('date_format')); ?>

投稿者も投稿日も表示させたくない場合には、14行目全体を消してしまえば、投稿者も投稿日も両方とも非表示になります。

②「Tags:」部分を日本語化

「Tags:」を表示させているのは、single.php なので、single.php の34行目付近にある・・・

<?php the_tags('<p class="post-tags"><span>'.__('Tags:','hueman').'</span> ','','</p>'); ?>

というコードを、以下のコードで置き換えます。

<?php the_tags('<p class="post-tags"><span>'.'タグ:'.'</span> ','','</p>'); ?>

これで「Tags:」の文字が「タグ:」に変わりました。

hueman-single-after-tag

「タグ:」以外の「キーワード: 」などの文字にしたい、という場合には、 「タグ:」という文字を変更してもらえれば大丈夫です。
(以下同様になります)

③「PREVIOUS STORY」、「NEXT STORY」を日本語化

次は前後の投稿へのリンクを日本語化していきましょう。

設定によってはサイドバーなど別の場所に表示されているかもしれませんが、「PREVIOUS STORY」、「NEXT STORY」を「前の投稿」、「次の投稿」という文字に変更します。

こちらについては single.php ではなく、
incフォルダの中の post-nav.php に書かれているので、2行目付近にある以下のコードを、

<ul class="post-nav group">
    <li class="next"><?php next_post_link('%link', '<i class="fa fa-chevron-right"></i><strong>'.__('Next story', 'hueman').'</strong> <span>%title</span>'); ?></li>
    <li class="previous"><?php previous_post_link('%link', '<i class="fa fa-chevron-left"></i><strong>'.__('Previous story', 'hueman').'</strong> <span>%title</span>'); ?></li>
</ul>

以下のコードで置き換えます。

<ul class="post-nav group">
    <li class="next"><?php next_post_link('%link', '<i class="fa fa-chevron-right"></i><strong>次の投稿</strong> <span>%title</span>'); ?></li>
    <li class="previous"><?php previous_post_link('%link', '<i class="fa fa-chevron-left"></i><strong>前の投稿</strong> <span>%title</span>'); ?></li>
</ul>

↓ コード編集後

hueman-single-after-next-prev-post

④関連記事のタイトルを日本語化

それでは最後に「You may also like…」 の文字を日本語化します。

「You may also like…」についても、single.php ではなく、incフォルダの中の related-posts.php に書かれているので、5行目付近にある

<h4 class="heading">
    <i class="fa fa-hand-o-right"></i><?php _e('You may also like...','hueman'); ?>
</h4>

というコードを、以下のコードで置き換えます。

<h4 class="heading"><i class="fa fa-hand-o-right"></i>関連記事</h4>
hueman-single-after-related

「You may also like…」という関連記事のタイトルが「関連記事」の文字に変わりました。
これで完成です!

hueman-single-after