oleindesign 
このレッスンでは、各投稿ごとの情報をCSS IDやClassに出力する方法を解説します。これがあると、特定の記事やカテゴリー、タグに向けたスタイリングができたりするので便利ですよ。
動画
レッスンの準備
このレッスンでは、上記リポジトリのwp-lesson-11というディレクトリにあるファイルを使って学習を進めていきます。
WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-11ディレクトリを設置しましょう。
各投稿ごとの情報をCSSクラスとして出力してくれる post_class()を設置する
このレッスンでは、前回作成したループの中で利用する、投稿や固定ページの情報などを出力してくれるthe_ID()とpost_class()を設置します。
index.phpを開いて46行目あたりを確認すると<article class="hentry c-hentry">という記述を見つけることができるはずです。
こちらの<article>タグに設置してみましょう。以下のように設置してみてください。
ちなみに、現在設置されているCSSクラスはhentryとc-hentryということを覚えておいてください。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>この状態で表示を確認してみましょう。各投稿のデザインじゃ若干崩れていることに気づけるでしょうか？
ブラウザの開発者ツールでコードを確認すると、上記したCSSクラスのうちの１つc-hentryが欠けていることがわかります。
このクラスは、独自で設定しているCSSクラス名ですのでpost_class()などでは自動的に出力されることはありません。hentryというクラスは自動で出力されます。
任意のCSSクラス名をpost_class()に出力させるには、以下のような記述が必要になります。
<?php post_class( 'c-hentry' ); ?>このように対応すると、以下のようなコードになります。
<article id="post-<?php the_ID(); ?>" <?php post_class( 'c-hentry' ); ?>>