WordPressで投稿フォーマットを使用する方法

公開: 2015-05-12

雑誌などのメディアで人気のあるデザイン要素の1つは、記事やページごとにスタイルや色を変えることです。 ページに複数の記事がある場合、それらを異なる外観にするために、異なるフォント、レイアウト、またはコールアウトで表示されることがよくあります。 これにより、雑誌全体でページがより面白くなります。 もちろん、これらのデザイン要素は画面上でもうまく機能します。

WordPressサイトの外観に多様性を与えるために、Automatticは投稿フォーマットを追加しました。 これにより、投稿の種類に基づいて異なる外観にすることができます。 それはまたあなたのウェブサイトにいくつかのより多くの特徴と能力を与えます。 たとえば、簡単な見積もりやステータスを投稿するだけで、サイトは標準のブログスタイルを維持しながらマイクロブログを作成できます。

投稿フォーマットとは何ですか？

投稿フォーマットは、テーマが投稿の外観やスタイルをカスタマイズするために使用できるメタ情報です。 これらは、テーマに組み込んだり、テーマに追加したりできる機能です。 テーマがそれらをサポートしている場合は、新しい投稿を作成するときにこれらの興味深いオプションのセットを見つけることができます。 画面の右側に、[フォーマット]というラベルの付いたボックスが表示されます。

投稿フォーマットとは

Standard、Image、Quoteなどのいくつかの選択肢が含まれています。 これらのオプションは、標準の日常の投稿とは異なるスタイルを作成します。 それぞれの使い方を見ていきましょう。

選択できる投稿形式は9つあります。

  • 標準–投稿フォーマットは指定されていません。 コンテンツタイプは、コンテンツ自体の中で処理されます。
  • 余談ですが、タイトルのない短いメモの更新です。
  • 画像–投稿内の単一の画像。 コンテンツの最初の<img/>タグを画像として使用できます。 URLを使用することもできます。
  • ビデオ–単一のビデオまたはビデオプレイリストにすることができます。 最初の<video/>タグまたはオブジェクト/コンテンツ内の埋め込みを使用するか、URLを使用できます。
  • 引用–ブロック引用としてフォーマットされた引用、またはタイトルとして著者の名前が付いたコンテンツ。
  • リンク–別のWebサイトへのハイパーリンク。 コンテンツの最初の<ahref=””>タグをリンクとして使用できます。 URLを使用することもできます。
  • ギャラリー–画像またはフォトギャラリー。 通常、ギャラリーのショートコードで使用されます。
  • ステータス–ステータスの更新。
  • オーディオ–単一のオーディオファイルまたは完全なオーディオプレイリスト。
  • チャット–トランスクリプト形式の会話。

投稿フォーマットを使用する理由

投稿フォーマットを使用しても内容は変わりませんが、なぜそれらを使用するのですか？ すでにギャラリー、ビデオ、画像、およびオーディオプレーヤーを表示できます。 では、なぜ投稿形式を使用する必要があるのでしょうか。 さまざまな種類のコンテンツを互いに区別します。 これにより、投稿は標準の日常の投稿よりも少しスタイルが良くなります。

たとえば、すべてのオーディオを特定の色の背景とスピーカーのアイコンで表示できます。 あなたの訪問者はそれがオーディオファイルであることを一目で知るでしょう。 それが彼らが探しているものであるならば、彼らはそれをより簡単に見つけるでしょう、そして彼らはそれをあなたに感謝するでしょう。

投稿のフォーマットは、タイトルのフォントとスタイル、コメントとカテゴリ情報の場所、特定の投稿の背後にある背景、画面上のコンテンツの位置とともに変更されます。 それはあなたのサイトが1つの投稿から別の投稿へと同じように見えるのを防ぎ、それにいくつかの奇妙なものを与えます。

それらはあなたのコンテンツがどのように見えるかについてあなたにはるかに良いカスタマイズを与えます。 短い形式のコンテンツを際立たせます。 それはマイクロブログを素晴らしく見せます。 投稿フォーマットがないと、すべての投稿は同じように見えますが、コンテンツ自体が異なります。

テーマに投稿フォーマットを追加する

すべてのテーマがすぐにサポートされるわけではありませんが、数行のコードを使用して追加できます。 WordPressCodexのコードを見てみましょう。

まず、 functions.phpファイルにadd_theme_support（）関数を追加します。 含める内容を選択することで、テーマでサポートする投稿形式を選択できます。 フォーマットの配列は次のようになります。

[php] add_theme_support（'post-formats'、array（'aside'、'gallery'））; [/ php]

after_setup_themeフックを使用して、initフックの前に配置できます。

次に行うことは、投稿タイプのサポートを追加することです。 これを行うには、 functions.phpファイルにadd_post_type_support（）を追加します。 コードは次のようになります。

[php]//投稿フォーマットをpost_typeに追加'page'add_post_type_support（'page'、'post-formats'）;//投稿フォーマットをpost_typeに追加'my_custom_post_type' add_post_type_support（'my_custom_post_type'、'post-formats'） ; [/ php]

もう1つのオプションは、関数register_post_type（）の「supports」パラメーター配列に「post-formats」を追加することです。 コードは次のようになります。

[php] $ args = array（…'supports' => array（'title'、'editor'、'author'、'post-formats'））; register_post_type（'book'、$ args）; [/ php]

フォーマットを使用するには、get_post_format（）を使用して投稿のフォーマットを確認します。

もう1つのオプションは、has_post_format（）条件付きタグを使用することです。 コードは次のようになります。

[php] if（has_post_format（'video'））{echo'これはビデオフォーマットです';}[/ php]

動的なスタイリングクラスを追加する場合は、投稿のラッパーコードのpost_class（）関数でスタイリングルールを使用することもできます。

たとえば、これをスタイルシートに追加すると、投稿のタイトルが非表示になります。

[css] .format-status .post-title {display：none; } [/ css]

スタイリングのヒント

フォーマットがテーマに組み込まれている場合、そのルックアンドフィールに一致させるために、そのテーマ専用にスタイル設定されている可能性があります。 独自のスタイルを作成することも、既存のスタイルを変更することもできます。 覚えておくべきことがいくつかあります。

  • 投稿が特定のタイプとして簡単に認識されるように、フォーマットを使用してください。
  • 脇、リンク、およびステータスの形式–タイトルや作成者の情報なしで表示します。 それらをシンプルかつ短くしてください。
  • 脇に1つか2つの段落を含める必要があります。 コメントを許可するには、the_permalink（）を使用します。
  • リンクには、リンク付きの文が含まれている必要があります。 コメントを許可するには、the_permalink（）を使用します。
  • 投稿でコメントが許可されないように、ステータスにthe_permalink（）を含めないでください。
  • 画像、音声、および動画には、キャプション/テキストの有無にかかわらず、単一の画像、音声、または動画を含める必要があります。 プラグインまたは標準の埋め込みを使用してコンテンツを表示します。
  • 見積もり–追加情報のない人からの簡単な見積もりを投稿します。 引用された人の名前を署名記事として表示する場合は、投稿のタイトルにその人の名前を入れ、投稿のスタイルを設定してthe_content（）を単独で表示するが、ブロック引用としてスタイルを変更してから、the_title（）を使用できます。
  • チャット–スタイリングを使用して、灰色の背景内に等幅フォントでコンテンツを表示します。

子テーマの場合は、親テーマの後でadd_theme_support（）を呼び出します。 コードは次のようになります。

[php] add_action（'after_setup_theme'、'childtheme_formats'、11）; function childtheme_formats（）{add_theme_support（'post-formats'、array（'aside'、'gallery'、'link'））;} [/ php]

get_post_format（）を検索、アーカイブ、および単一投稿ビューに追加することを忘れないでください。

詳細およびソースコードの入手については、WordPressCodexの記事「PostFormats」を参照してください。

CSS

CSS

スタイルシート内でスタイルを編集できます。 ここでは、色やフォントなどを調整できます。

投稿フォーマットの使用方法

それらを使用するには、最初にコンテンツを作成するか、最初に投稿フォーマットを選択するかは関係ありません。 通常どおりコンテンツを作成し、リストから投稿形式を選択するだけです。 選択した投稿フォーマットに一致するようにビジュアルエディターのフォーマットが変更されます。

ほとんどが同じように機能するので、いくつかの例を示します。 フォーマットとスタイルが組み込まれているTwentyThirteenを使用しています。

オーディオフォーマット

この例では、オーディオを選択してMP3をアップロードしました。

オーディオフォーマット

ビジュアルエディターで投稿フォーマットを選択すると、エディター自体がフォーマットを表示するように変更されます。

投稿フォーマットのないオーディオ

投稿フォーマットなし

これにはオーディオプレーヤーがありますが、他のすべては、標準の投稿形式を使用する他のすべての投稿と同じように見えます。 それを際立たせるものは何もありません。

投稿形式のオーディオ

投稿フォーマット付き

音声投稿フォーマットは、投稿を別の色に設定し、スピーカーアイコンを追加します。 また、日付、カテゴリ、タイトル、およびコンテンツに異なるレイアウトを使用します。 私の読者は、このスタイルを探すので、私が作成するすべてのオーディオ投稿を簡単に認識できます。

ステータス投稿フォーマット

ステータス投稿フォーマット

この例では、ステータスのクイックアップデートを作成しました。

フォーマットなしのステータス投稿

フォーマットなしのステータス投稿

これが標準形式を使用した投稿です。 タイトルが投稿の最も目立つ部分であることがわかります。 コンテンツが短いため、ページ上で失われます。 巨大なタイトルがなければ、この投稿はホームページにほとんど表示されない可能性があります。

フォーマット付きのステータス投稿

フォーマット付きのステータス投稿

ステータス形式が適用された投稿は次のとおりです。 最初に気付くのは、私が書いた不快なタイトルが削除され、投稿のテキストが大きくなり、背景色が異なることです。 フォントはイタリック体で配置され、さらに目立つようになっています。日付にはStatusという単語が含まれ、投稿の最初の単語の前に小さなダッシュが表示されます。 投稿の上から下にダッシュを通る小さな縦の点線もあります。

エディターでのすべての投稿の表示

エディターでのすべての投稿の表示

ダッシュボードから[すべての投稿]を選択すると、リストに投稿タイプのアイコンが表示されます。 アイコンを選択すると、その投稿タイプのすべての投稿が表示されます。 探している投稿フォーマットのみをフィルタリングして表示できるため、これは編集に役立ちます。

比較

投稿フォーマットがある場合とない場合のホームページでの投稿は次のようになります。

投稿タイプのないホームページ

投稿タイプのないホームページ

すべての投稿の形式は同じです。 同じフォント、同じ背景、同じタイトル、同じコンテンツ以外のすべて。 画像以外に目立つものはありません。 問題は、すべてに画像があるわけではなく、短いコンテンツがミックスで失われる可能性があることです。

投稿タイプのあるホームページ

投稿タイプのあるホームページ

投稿フォーマットを使用すると、短い投稿の一部が少し目立つようになります。 他の投稿の画像に圧倒される可能性はありますが、引用に黒の背景を使用し、ステータスの更新に茶色の背景を使用していることを読者が知っている場合は、色だけでそれらを認識します。

テーマの変更

この時点までのすべてのサンプルは、23のテーマからのものです。 テーマを変更すると、投稿は特定の形式に設定されているという事実を保持しますが、形式のスタイルはテーマごとに異なります。 いくつかのフォーマットを追加したり、好みに合わせてスタイルを変更したりする必要があるかもしれません。

チップ

テーマにコードを追加する前に、必ずバックアップを作成してください。 別のWordPress開発環境にアクセスできる場合は、最初にその環境でコードをテストすることをお勧めします。

テーマを変更する場合、テーマに含まれていない投稿の形式とスタイルを必ず追加してください。 テーマ間に一貫性がないため、調整を行わないと投稿がどのようになるかわかりません。

独自のスタイルを作成する場合でも、既成のスタイルを変更する場合でも、互いに異なるスタイルを使用してください。 このようにして、読者は投稿に含まれるコンテンツの種類を一目で知ることができます。 必要に応じて、類似または異なるものにすることができます。

すべての形式を使用する必要はありません。 あなたのウェブサイトと聴衆にとって最も意味のあるものを使用してください。

最終的な考え

投稿フォーマットは使いやすく、ウェブサイトにちょっとした魅力を加えます。 それらは、すべての投稿がすべての投稿のように見えるのを防ぎます。 視覚的な多様性に加えて、読者が探しているものを簡単に取得できるように視覚的な手がかりを提供することで、読者がサイト上のさまざまなタイプのコンテンツを識別するのにも役立ちます。 作成するコンテンツの種類が多ければ多いほど、それらはより有用になります。

あなたの番！ 投稿フォーマットを使用していますか？ それらをテーマに追加しましたか？ 独自のスタイルを作成しましたか？ 追加するものはありますか？ 以下のコメントであなたの考えを聞きたいです。