WordPressテーマSANGOの質問

記事下のTAGS(タグ一覧)の表示位置を変えたい

アバター
narumi

お世話になっております。
記事を読み終わった最後に出てくるTAGSの位置を変えることはできるでしょうか?
できれば記事タイトル下に持って行きたいと考えております。
またTAGSの名前変更をすることは可能ですか?

お手数おかけいたしますが、よろしくお願いいたします。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/04/14

やや大きなカスタマイズが必要になりますが可能です。
①子テーマにpartsフォルダーを作成
②さらにその中にsingleフォルダーを作成
③その中にentry-footer.phpと、entry-header.phpを親テーマから複製
④子テーマのentry-footer.phpにタグの出力コードが書かれています。

  //タグ一覧を出力
  if(get_the_tags()) : ?>
  <div class="meta-tag">
    <p class="footer-meta_title">TAGS :</p>
    <?php the_tags('<ul><li>','</li><li>','</li></ul>');?>
  </div>
<?php endif; ?>

これを以下に置き換えると、記事下からタグの出力が消えます。

?>

⑤子テーマのentry-header.phpのタグを出力したい位置に以下のコードを貼り付けます。

<?php if(get_the_tags()) : ?>
  <div class="header-tags">
    <p class="header-tags__title">TAGS :</p>
    <?php the_tags('<ul class="header-tags__list"><li>','</li><li>','</li></ul>');?>
  </div>
<?php endif; ?>

↑この中の「TAGS」を好きな文字列に変えればOKです。

⑥CSSを追加

.header-tags__title, .header-tags__list, .header-tags__list li {
  display: inline-block;
}

.header-tags {
  padding: 10px;/*タグまわりの余白*/
}
.header-tags__title, .header-tags__list {
  margin: 0;
}
.header-tags__list li a {
  margin-right: 5px;
  color: #文字色のコード;
}
.header-tags__list a:before {
  padding-left: 3px;/*タグとタグの間の隙間*/
  content: '#';
}
/*タグのタイトルと一覧を横並びにしたい場合は、以下を追加*/
.header-tags {
  display: flex;
}
アバター
narumi
2019/04/14

すみません、先ほどの件は解決しました。

もう一つ質問です。
いま変更してみたところ、パソコンからでは反映されているのですが、スマホから見ると反映されていません。
スマホからも同じようにするには、なにかまた別の設定が必要なのでしょうか?

またできればヘッダーのタグの見え方もフッターのように、横並び(例: #○○ #○○ #○○ )に見えるようにしたいのですが、可能でしょうか?
現在ヘッダーのタグは縦並びになっています…

アバター
narumi
2019/04/14

すみません、いま触っていたところトップページは表示されるのですが
記事のページにいくと表示されなくなってしまいました。

ちなみに、entry-header.phpはこんな風になっています

<time class="pubdate entry-time" datetime="”>

<time class="updated entry-time" datetime="”>

‘webfeedsFeaturedVisual’));?>

<label class="fab-btn ” for=”fab”>

SHARE

<div class="fab__contents_img" style="background-image: url();”>

サルワカくん
サルワカくん
2019/04/15

さきほどの件は解決したとのことですが、もし何らかの操作や修正を行ったのであれば、他の方の参考になるように共有していただけると幸いです。

あ、そうですよね。前回のコメントのコードにCSSを追加しました。
それに伴い、entry-header.phpに貼り付けるコード(⑤のコード)も少し修正を行ったので、再度貼り付け直していただけますか?

よろしくお願いします。

アバター
narumi
2019/04/15

TAGSという言葉が一番下にきていた件は、CSSの追加をカスタマイズのところからしていたのが原因でした。
いまテーマ編集から行ったところ、1つ目のタグの横に「TAGS」がきました。

タグの横並びの件を、お手数ですがよろしくお願いいたします。

アバター
narumi
2019/04/15

修正は、他サイトでも使わせていただいているSANGOのテーマからentry-header.phpの中身をコピーして貼り付けて解決しました。

そして新たなコードとCSSの追加をありがとうございます。

いま貼り付けてみたのですが、スマホでの表示はできたのですが
パソコン・スマホ共にタグが縦並びになっています。
これを横並びに変えることはできますでしょうか?

また、TAGSという言葉がタグの一番下にきてしまいました…
これはまた何か別の問題なのでしょうか?

色々とお手数をおかけして申し訳ありません。

サルワカくん
サルワカくん
2019/04/15

narumi様

そういうことですね。
申し訳ないのですが、さきほどのCSSにさらに修正を加えましたので貼り付け直していただければと思います。
(タグの色コードの指定や余白の指定なども加えました。「色コード」の部分に好きな色をしてしてくださいませ)

ご確認よろしくお願いします。

アバター
narumi
2019/04/15

度々ありがとうございます。
いまCSSを貼り替えてみました。
タグはやはり縦並びになっている状態です。

また「#」や「/」のマークもありませんでした。

記事下にあるようなタグのデザインを上に持ってくるというのは、やはり難しいでしょうか…?

お手数をおかけしてしまって申し訳ありません。

サルワカくん
サルワカくん
2019/04/16

以前記載いただいたWebサイトのURLから拝見したところ横並びになっているようです。
ブラウザのキャッシュの削除し忘れではないでしょうか?

よろしくお願いします。

アバター
narumi
2019/04/17

キャッシュを削除して確認したところ、できていました!
ありがとうございます。