WordPress のテーマ Simplicity2 のタグ表示位置を変更する

WordPress
この記事は約3分で読めます。
この記事は最終更新日より 1 年以上経過しています。
画像やリンクが無効になっている可能性もあるのでご了承下さい。

 当ブログでは 2016/10/31 現在、Simplicity2 をテーマとして適用している状態となっている。
 デフォルトではタグを表示させても記事のかなーり下の方へ表示されており、偶に自分でタグから記事を見るときには表示されている場所を探してしまうことが多い。
 それならばとテーマをちょっと弄ってポストメタの直ぐ下へ表示させてしまえということでちょっとやってみた。

前提

 テーマの編集に於いては子テーマを用いることする。これは当然、CSS やテーマを直接弄った後、テーマの更新があると何度も書き換えるハメになるから。メンテナンス性がもの凄く向上するので、まだ子テーマを弄る方法にしていない人はググってやってみた方が良い。

準備

 Simplicity2 の親テーマがあるディレクトリから entry-body.php を子テーマのディレクトリへコピーする。

cd public_html/wp-content/themes
cp simplicity2/entry-body.php simplicity2-child/

テーマ編集作業

 子テーマにコピーした entry-body.php を編集する。
 何でも良いのでテキストエディタで開き、94 行目あたりにある次の 3 行

      <?php if (is_tag_visible()): ?>
      <span class="post-tag"><?php the_tags('<span class="fa fa-tag fa-fw"></span>',', '); ?></span>
      <?php endif; ?>

 これを 41 行目あたりの get_template_part(‘admin-pv’); と記述のある直ぐ上に移動させて class をちょっと変えてあげつつ、次の様にして保存する。

      <?php wlw_edit_post_link('WLWで編集', '<span class="wlw-edit"><span class="fa fa-pencil-square-o fa-fw"></span>', '</span>'); ?\
>
    </p>

    <?php if (is_tag_visible()): ?>
    <span class="post-tag_custom"><?php the_tags('<span class="fa fa-tag fa-fw"></span>',', '); ?></span>
    <?php endif; ?>

    <?php get_template_part('admin-pv');//管理者のみにPV表示?>

スタイルシート編集

 これもまた子テーマ側の style.css を編集し、上記テーマ編集で新たに作ったクラスを定義する。
 今回、文字サイズを控えめにしつつ右寄せにしたかったので次の様にした。div でブロックを作らなくても span のまま text-align を効かせるられるなんて事はこの時初めて知る事となった。

.post-tag_custom {
  font-size: 0.8em;
  display: inline-block;
  width: 100%;
  text-align: right;
}

おわりに

 既に本記事内容を適用した状態であるので、ポストメタ下部に記事のタグをカンマ区切りで表示されていることを確認出来るハズ。
 任意の場所に表示できるし CSS 弄ればもっと飾りっ気ある表示も可能だろう。
 今後は親テーマのバージョンが上がって更新される度に entry-body.php に大きな変更が無いか確認する必要はでてくるのだが、毎回同じ書き換え作業するよりは遙かにマシだろうかと思う。

著者プロフィール
ぶっち

本格的に PC へ触れ始めてたのは 1990 年位から。
興味は PC 全般。OS は Windows と Linux などを嗜む。
プログラマやネットワークエンジニアを経てフリーに活動している 2 児の父な 40 代半ばのおじさんです。

ぶっちをフォローする

コメント

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.