記事の一覧（インデックス）ページ段階でもタグ表示を出す方法はあるでしょうか？

以前フォーラムにたった質問の解答サンプルとして作ったものを流用して、今回の質問の内容を反映させたサンプルです。
サンプル: .post-mwtaのカテゴリーをリストアイテム最後尾に移動 | codepen

Simplicityのデフォルトのリストアイテムは、サムネイルを左右どちらかに配置するために、タイトル部分などが表示されている.entry-caed-contentにmarginが入っています。デフォルトであれば左側にサムネイルが入る分のマージンが入ってます。

これが邪魔をしてサムネイルの下にカテゴリをもってけないので、position: absolute;にて絶対配置にしています。
そのまま絶対配置にすると「記事を読む」などに重なってしまうため、.entryのbottomに1.5emの余白を作りカテゴリーを入れてます。

カテゴリの移動はjQueryで行っているのでPHPを特別イジる必要はありませんが、PHPの方をいじってもできます。

と、仕組みを説明した所で、要素の移動なりスタイルはたいていの事はできますが、カテゴリ自体の表示位置を変えたいということで間違いはないですかね？
それともカテゴリが表示されているのに気がついていないというだけではないですよね？
Twentyfourteenのタグ表示はSimplicityでは投稿日の横に出てます。これを移動したいという内容の質問かを確認してから、どのようにすれば実装できるかを後で説明したいと思います。
また表示自体をTwentyfourteenの付箋のようにもできますが、不要なfontAwesomeのアイコンが入っているので、これらを消す必要もあります。

あ、タグでしたか(汗)

って自分でもタグって書いてレスしてるんですけど(笑)
カテゴリと思い違いしてました(笑)

Hidekichiさん

素早い返信ありがとうございます。
今回、表示したいのはタグであり、表示箇所としては日付の横辺りで良いと思っています。
タグの形もTwentyfourteenのようにできれば正しく理想です。
頼ってしまって恐縮ですが、fontAwesomeのアイコンの消し方もお教え頂けますと助かります。

わいひらさん

具体的な返信ありがとうございます。
まず、ご教授頂いた通りにentry-card-content.phpの中に指定コードを張り付け挿入してみました。
挿入場所を幾つか試したのですが、特に表示が変わりませんでした。
何か思い違いしていたり、挿入の仕方などで間違えやすいことなどありましたら、お教え頂けますでしょうか。

> fontAwesomeのアイコンの消し方もお教え頂けますと助かります。
普通にセレクタをたどってdisplay: noneか、jQueryでremove()でしょうか。

わいひらさんのスクリプトは以下のような感じでイケると思います。

<div class="tags">
<?php
  the_tags( '<ul><li>', '</li><li>', '</li></ul>' );
?>
</div>

※ コード化されていると思いますが、その内わいひらさんが直してくれると思います。

そのcss

/*tags*/
.entry .tags ul {
  display: flex;
  flex-flow: row wrap;
  justify-contnet: flex-start;
  margin: 0;
  padding: 0;
}
.entry .tags li {
  list-style: none;
  margin: 0 4px;
  color: #fff;
  background-color: #333;
}

.entry .tags li a {
  color: inherit;
}

タグっぽくするには、beforeなどで左向きの三角を入れてみたりとかですかね。

表示サンプル: blazechariot-cloud9-

わいひらさんがコード直してくれる前に解説しておくと、

the_tags の最初の引数部分は [ul][li] 真ん中は [/li][li] 最後が [/li][/ul]です。
その前後にdivでclassを入れてtagsにしてます。これらをクォートで囲み、phpの開始タグ 終了タグが入っているだけです。
上記の[]は半角〈〉と読み替えて下さい。

entry-card-contet.phpの最後のdivの後に入れています。つまりは、.entry-card-contentの中身が少ないとサンプルのようにサムネイルよりも上になってしまいます。なので、その親になる.entryの高さをサムネイルと同じにするかちょっと大きめにして、

.entry {
  position: relative;
  padding-bottom: 1.5em;
  height: 180px;
}

.entry .tags {
  position: absolute;
  bottom: 0; /*任意調整*/
  left: 0;
}

こんな感じにしたらイケるんじゃないでしょうか。試してないですけれども(笑)
サムネイルの高さは150pxです。なので、同じにしてbottomに揃えると、サムネイルのそこにタグが揃います。なのでもう少し高くして180pxにしてありますが、ここらは要調整です。
また.entryにposition: relativeを入れないと、absoluteした.tagsが画面下に飛んでいってしまうだろうと思うので注意して下さい。

またレスポンシブを何も考慮してないので、それぞれのメディアクエリの時の動作を追記する必要があります。ここらはデベロッパーツールを調べながら色々と試してみて下さい。

Hidekichiさん、わいひらさん

返信遅れましてすみません。

実は大変申し上げずらいのですが・・・お二人の言われていることがまるでナチの暗号のようです orz

基本から分かっていないので恐縮なのですが、設定としてはエントリーカードは使用しています。

※カスタマイズ ＞ 一覧リストのスタイル　内にある設定のことですね？
「一覧（インデックス）ページの表示スタイル設定」はエントリーカード（デフォルト）
になったままです。

以下、URLになります。

http://gw-test.link/

※色々と試す為の開発用のテストサイトです。
多少、デザインを変えても同じ設定で公開します。

少なくとも言われている内容を理解できるよう学びます。

どこらがわからないのかを書いてもらったら説明しますが、まずこれまでの内容をまとめると

・Simplicityではデフォルトでタグを出力する機能はない
・機能を追加するためにはwordpressの関数であるthe_tags()などを利用して任意の位置に挿入しないといけない
・挿入されたthe_tags()などは、デフォルトでhtmlを吐くだけなのでそれをスタイルする必要がある

ここまでは良いでしょうか？

the_tags(before,separate,after);
the_tags();は、こんな引数(ひきすう)を持っています。わいひらさんの方法ではspanタグを使い、僕のではulとliでリストスタイルで書き出すと言うことしています。

で、このthe_tags()をどこに書くかと言うのが例えば親テーマのentry-card-content.phpで、これはトップページの各記事のリストアイテムの1つ分のスクリプトが書いてあります。これを何回もその記事のデータで書き換えることでトップページのリストができています。他にも利用されているのがありますが簡略説明で。

質問のTwentyfourteenのように、サムネイルの下にタグを出そうとした場合、このentry-card-content.phpの任意の箇所(表示したい場所)にthe_tags()を入れる必要があり、僕の礼なら、一番下に追記したら良い感じになります。

わいひらさんのものにしても僕のにしてもclassを設定してありますから、それに対してスタイルしないといけません。これが「そのcss」で書いてある部分です。これは子テーマを利用している場合子テーマstyle.cssに書けば良いかと思います。

ひとまずこれで、表示サンプルにアクセスしたようには表示できます。あとはそれを自分好みに修正することで色やフォントサイズ、その形状などを表示できるようになるという寸法です。

Hidekichiさん

ご丁寧な解説、ありがとうございます。
返信内容を調べながら把握しようとしていました。
質問する前にまず基本を学びます。

わいひらさん

多忙の中、気を使って頂いた言葉、感謝します。
まずはWordpressをもっとよく知るよう努めます。
ありがとうございます。

m(__)m