アイキャッチ導入と個別URLでの非表示化

テーマをTwenty Fourteenにしたのでウェブマガジンに最適|WordPress テーマ「Twenty Fourteen」を参考に設定してみようと思いました。特にフィーチャードエリアを確りと使いたい !

さて、フィーチャードエリアに画像を表示する場合、対象のエントリにアイキャッチ画像が設定されている必要があります。ところが標準機能ではメディアとしてアップロードした画像しか対象にできない為に私みたいにFlickrをベースに画像を掲載しているとこの機能が使えません。

そこで Auto Post Thumbnail というプラグインを利用します。細かいことは記事内のflickrリンク等からアイキャッチを自動作成するプラグインを導入 | 黒生鉄心の奇妙な日常で記事にしてくれているので割愛。多少時間はかかりましたが、Generate Post Thumbnailsボタンを押してからエラー無く取り込み完了しました。

次にフィーチャードエリアのカスタマイズをします。対応タグfeaturedをフィーチャーしたい記事に埋め込んだら標準では完了です。何となくタイトルが良くなったのですが、問題発生。個別のページでいちいちアイキャッチが先頭に表示されて少々煩い。そこでフィーチャードエリア以外はアイキャッチを非表示にします。色々考えたのですが、CSSで処理してしまうのが良さそうです。

/* Twenty Fourteen for cefa::blog */
@media screen and (min-width: 401px) {
  #primary .has-post-thumbnail header.entry-header {
    margin-top: 24px;
  }
  #primary .has-post-thumbnail a.post-thumbnail {
    display: none;
  }
  #primary .has-post-thumbnail {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}

これをカスタマイズCSSとかに入れておけば良い具合です。ひとまず完了。