アクアリウムのおすすめグッズはこちら!

SANGOの記事ヘッダーにタグを表示するカスタマイズ

SANGOの記事ヘッダーにタグを追加

TAGS:

皆さんもそうだと思いますが、WordPressのタグって、どのように設定したら分かりやすいか結構悩み抜いて設定していますよね。

せっかく悩み抜いて設定したんだから、ユーザーにはカテゴリーからだけでなく、タグからも関連した記事を見てもらいたいんです。

ですが、SANGOのデフォルトのデザインでは、記事ヘッダー(記事の始め)にタグが出力されないので、出力できるようにカスタマイズしました。

また、この方法はSANGO以外でも可能なカスタマイズなので、その他のテーマをお使いでも参考にしてみてください。

タグも結構使えるよ?

タグを追加したよ

タグを追加したサンプル

SANGOの記事ヘッダーにタグを追加する方法

今回のカスタマイズは、テーマヘッダーとCSSに修正を加えます。

注意
本記事の内容で生じたエラーなどの責任は一切負いかねます。カスタマイズは自己責任でお願いします。事前にバックアップ等を取っておくことをおすすめします。バックアップは「BackWPupのインストールと設定|WordPressの自動バックアップ」を参考にしてください。

また、phpを編集していくので、今後変更が上書きされないように、子テーマを使用するようにしてください。

子テーマについての説明とSANGOの子テーマのダウンロードは下記ページを参照してください。

公式子テーマについて

記事ヘッダーにタグの出力を追記する

記事のヘッダーを構成しているphpファイルにタグを出力するコードを追記していきます。

子テーマにphpファイルをコピーする

まずは、FTPソフトを使用して、親テーマの記事ヘッダーを構成してるphpファイルを子テーマにコピーします。

SANGOの場合は、こちらのパスの「entry-header.php」です。

rootwp-contentthemessango-themepartssingleentry-header.php

上記のパスと同じになるように、子テーマにコピーしてください。

rootwp-contentthemessango-theme-childpartssingleentry-header.php

このようなパスになります。

タグを出力するコードを追記する

次に、Wordpressの管理画面から、外観テーマエディターpartssingleentry-header.phpを開き、以下のコードをヘッダーの最下部に追記して保存してください。

コード
<?php if(has_tag()==true) : ?>
  <div class="header-tags"><?php the_tags('<p class="header-tags-title">TAGS:</p>', ''); ?></div>
<?php endif; ?>

このコードがタグそのものを出力するコードです。

SANGOの場合は、こちらのようになります。

SANGOの場合の追記後

CSSに以下のコードを追加する

次に、出力したタグのデザインを整えるために、下記のコードをstyle.cssにコピペしてください。

cssへ追記
/*--------------------------------------
 * 記事ヘッダーにタグを追加
 * ------------------------------------*/
.header-tags{
  position: relative;
  padding: 0 2em 1em 2em;
  font-size: 0.9em;
  background-image: linear-gradient( -45deg, #ececec 25%, #f9f9f9 25%, #f9f9f9 50%, #ececec 50%, #ececec 75%, #f9f9f9 75%, #f9f9f9 );
  background-size: 8px 8px;
  border-top: solid #424242;
}
.header-tags-title{
  display: inline-block;
  background: #424242;
  color: white;
  text-align: center;
  margin: 1em 1em 0 0;
  padding: 0 1em 0 1.5em;
}
.header-tags-title:before {
  content: '関連タグ';
  position: absolute;
  bottom: 100%;
  left: 0;
  font-size: .8em;
  background-color: #424242;
  border-radius: 0 5px 0 0;
  padding: 0 1em 0 .8em;
  font-weight: bold;
}
.header-tags a{
  display: inline-block;
  margin: 1em .5em 0 0;
  padding: 0 .5em;
  background-color: #fff;
  color: #424242!important;
  text-decoration:none;
}
.header-tags a:before{
  font-family: "Font Awesome 5 Free";
  content: '\f02b';
  font-weight: bold;
  padding-right: .3em;
}

キャッシュをクリアする

phpとcssの追記は終了なので、キャッシュをクリアしてデザインが反映されていることを確認しましょう。

最後に

記事のトップ(記事のヘッダー)にタグを追加するカスタマイズを紹介しました。

色などの微調整は、CSSの数値を変更して行ってください。

やっぱりタグって大事やね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です