WordPress で投稿メタデータを表示およびスタイル設定する方法

公開: 2017-10-26

Styling Post Meta Data

ブログ投稿の日付やカテゴリに気づいたことがありますか? これは「投稿メタデータ」と呼ばれるもので、ブログ投稿の重要な部分です。ブログのコンテンツに関する簡潔なメタデータを提供するのに役立ちます。

ポストメタを適切に使用すれば、ユーザーエクスペリエンスを向上させることができます。訪問者が特定のトピックのみに興味を持っているとします。カテゴリメタは、すべての投稿を表示するのではなく、特定のトピックに関する投稿を表示できるように、カテゴリごとに投稿を短くするのに役立ちます。または、特定の作成者の投稿のみを表示したい場合は、投稿メタが役立ちます。

この投稿では、投稿のメタデータを表示してスタイルを設定する方法を紹介します。

投稿メタデータとは何ですか? また、ブログにどのように役立つのでしょうか?

投稿のメタデータセクションには、公開日、著者名、カテゴリ、タグ、カスタム分類法など、ブログ投稿の関連情報が含まれています。

ブログをお持ちの場合は、投稿のメタデータが適切であることを確認する必要があります。この情報は、訪問者が投稿についてより理解するのに役立ち、サイトのナビゲーションを容易にすることでページビューを増やすのにも役立ちます.

どのくらいの投稿メタデータを表示する必要がありますか?

投稿メタデータの場所は、テーマによって異なります。投稿タイトルの前、タイトルの後、コンテンツの直後に表示される場合があります。

Post Meta Data

しかし、投稿のメタ要素が多すぎると、レイアウトが台無しになる可能性があります。理想的な状況は、必要と思われる情報のみを表示することです。

それでは、投稿メタをカスタマイズして追加する方法を見てみましょう。

投稿メタデータのカスタマイズ

前述のように、投稿のメタの場所はテーマによって異なります。ここでは、特定のテーマに取り組みます。この場合、デフォルトの TwentySeventeen テーマです。そのため、コードとページがテーマと異なる場合があることに注意してください。

最新のテーマでは、投稿メタはテンプレートタグページで定義され、必要に応じて呼び出されますが、一部のテーマでは、投稿メタが投稿タイトルの直前または直後に配置されている場合があります。

通常、投稿のメタタグは、 index.php 、 single.php 、 archive.php 、およびコンテンツテンプレートページにあります。

簡単なコードは次のようになります。

ポストする

<?php the_time('F jS, Y'); ?> by <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>

このコードは、投稿日、作成者名、編集ボタンのようなものを表示します (ダッシュボードにログインしている場合のみ)。

しかし現在、ほとんどの最新のテーマはテンプレートタグページを使用して投稿メタを処理しています。それがどのように機能するか見てみましょう。

まず、変更を加える前に子テーマを作成する必要があります。

単一の投稿ページで作業します。これがフロントエンドからの外観です。

Post Meta from front-end

作成者名の前にユーザーアイコンを追加したい場合は、次のようにします。

TwentySeventeen テーマでは、単一の投稿を表示するためにsingle.phpテンプレートが使用されます。 get_template_partを探して、そこにあるテンプレートパスに注目してください。この場合のパスは次のとおりです。

 get_template_part( 'テンプレート パーツ/投稿/コンテンツ', get_post_format() );

パスに従ってcontent.phpを開き、 entry-headerセクションを検索します。

 <header class="entry-header">

<?php

if ( 'post' === get_post_type() ) {

echo '<div class="entry-meta">';

if ( is_single() ) {

Twentyseventeen_posted_on();

} そうしないと {

エコーtwtyseventeen_time_link();

Twentyseventeen_edit_link();

};

echo '</div><!-- .entry-meta -->';

};

 

if ( is_single() ) {

the_title( '<h1 class="entry-title">', '</h1>' );

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );

} そうしないと {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

}

?>

</header>

<!-- .entry-header -->

私たちは、twentyseventeen_posted_on(); を見ることができます。投稿メタを表示するためにここで関数が呼び出されるため、この関数を編集する必要があります。この関数はtemplate-tags.phpファイルにあります。

ヒント:テーマのfunction.phpファイルをチェックして、ファイル名とパスを取得してください。

Twentyseventeen_posted_on() を検索し、子テーマのfunction.phpファイルに関数全体をコピーペーストします (子テーマにfunction.phpファイルがない場合は、同じ名前の空のファイルを作成します)。

ここでは font awesome アイコンを使用します。WordPress で font awesome を使用する最も簡単な方法は、Better Font Awesome プラグインをインストールすることです。

 if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :

/**

* 現在の投稿日時と作成者のメタ情報を含む HTML を出力します。

*/

関数twentyseventeen_posted_on() {

// 著者名を取得します。 リンクで囲みます。

$byline = sprintf(

/* 翻訳者: %s: 投稿者 */

__( 'by %s', 'twentyseventeen' ),

'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '"><i class="fa fa-user" aria-hidden="true"></i>' . get_the_author() . '</a></span>'

);

// 最後に、これらすべてをページに書き込みましょう。

echo '<span class="posted-on">' . Twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline . '</span>';

}

endif;

これで、作成者名の横にユーザーアイコンが表示されます。

ヒント:これらの変更はcontent.phpファイルで直接行うことができますが、テーマ構造に従うことをお勧めします。

投稿メタデータの追加

ここまでで、既存のメタタグをカスタマイズしました。ここで、記事のタイトルの後にカテゴリとタグを表示するとします。

これを行うには、親テーマからcontent.phpファイルをコピーし、同じディレクトリパターンを維持して子テーマに貼り付けます。

Twentyseventeen > テンプレートパーツ > ポスト > content.php からトゥティーセブンティーンチャイルド > テンプレートパーツ > ポスト > content.php

ここで、新しい関数を作成する必要があります。

大変だと思いますか？実際にはそうではありません。これがあなたがする必要があることです。

ほとんどのテーマでは、投稿のどこかにカテゴリとタグが表示されます。ファイルを見つけて、関数内のコードを複製するだけです。

この例では、TwentySeventeen テーマカテゴリとタグがコンテンツの後に配置されています。次に、前のワークフローに従う必要があります。

content.phpを開いて、カテゴリとタグに使用されている関数を確認します。

 <?php

if ( is_single() ) {

Twentyseventeen_entry_footer();

}

?>

ここではtwentyseventeen_entry_footer()です。

次に、 template-tags.phpファイルに移動し、twentyseventeen_entry_footer() を検索します。

if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* カテゴリ、タグ、およびコメントのメタ情報を含む HTML を出力します。

*/

関数twentyseventeen_entry_footer() {

 

/* トランスレーター: リスト項目間で使用され、コンマの後にスペースがあります */

$separate_meta = __( ', ', 'twentyseventeen' );

 

// 投稿のカテゴリを取得します。

$categories_list = get_the_category_list( $separate_meta );

 

// 投稿のタグを取得します。

$tags_list = get_the_tag_list( '', $separate_meta );

 

// .entry-footer が空の場合は出力したくないので、そうでないことを確認してください。

if ( ( ( twentyseventeen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {

 

echo '<footer class="entry-footer">';

 

if ( 'post' === get_post_type() ) {

if ( ( $categories_list && Twentyseventeen_categorized_blog() ) || $tags_list ) {

echo '<span class="cat-tags-links">';

 

// 表示する前に、複数のカテゴリがあることを確認してください。

もし ( $categories_list && twentyseventeen_categorized_blog() ) {

echo '<span class="cat-links">' . Twentyseventeen_get_svg( array( 'icon' => 'folder-open' ) ) . '<span class="screen-reader-text">' . __( 'カテゴリ', 'twentyseventeen' ) . '</span>' . $categories_list . '</span>';

}

 

もし ( $tags_list ) {

echo '<span class="tags-links">' . Twentyseventeen_get_svg( array( 'icon' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'タグ', 'twentyseventeen' ) . '</span>' . $tags_list . '</span>';

}

 

echo '</span>';

}

}

 

Twentyseventeen_edit_link();

 

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

カテゴリとタグのコードを見つけて、次のように、子テーマのfunction.phpファイルの新しい関数内にコードをコピーして貼り付けます -

if ( ! function_exists( 'twentyseventeen_post_meta' ) ) :

/**

* 現在の投稿日時と作成者のメタ情報を含む HTML を出力します。

*/

関数twentyseventeen_post_meta() {

/* トランスレーター: リスト項目間で使用され、コンマの後にスペースがあります */

$separate_meta = __( ', ', 'twentyseventeen' );

// 投稿のカテゴリを取得します。

$categories_list = get_the_category_list( $separate_meta );

// 投稿のタグを取得します。

$tags_list = get_the_tag_list( '', $separate_meta );

echo '<span class="cat-tags-links">';

// 表示する前に、複数のカテゴリがあることを確認してください。

もし ( $categories_list && twentyseventeen_categorized_blog() ) {

echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'カテゴリ', 'twentyseventeen' ) . '</span>' . $categories_list . '</span>';

}

もし ( $tags_list ) {

echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'タグ', 'twentyseventeen' ) . '</span>' . $tags_list . '</span>';

}

echo '</span>';

};

endif;

カテゴリとタグの両方にフォントの素晴らしいアイコンを使用していることがわかります。

投稿メタのスタイリング

目的の場所にメタタグを配置したので、スタイルを調整します。

CSS の基本を知っていれば、非常に簡単です。カテゴリとタグのセクションを調整しましょう。

 .entry-header .cat-tags-links {

フォントサイズ: 14px;

}

.entry-header .cat-links {

右パディング: 5px;

}

Adjusted category and tags section

今は違うように見えます。

しかし、素晴らしいフォントやその他のアイコンの代わりに独自のカスタムアイコンを表示したい場合は、次のように CSS で背景画像として画像を使用できます。

 .entry-header .cat-links {

background: url(category-img.jpg) 左中央 no-repeat;

パディング左: 5px;

右パディング: 5px;

}

.entry-header .tags-links {

background: url(tag-img.jpg) 左中央 no-repeat;

パディング左: 5px;

右パディング: 5px;

}

完了したら、 function.phpファイルから font awesome コードを削除することを忘れないでください。

投稿メタデータを削除

投稿メタデータの削除は非常に簡単です。コードを見つけて削除するだけです。

Meta tag duplication

たとえば、単一の投稿ページが表示されている場合、カテゴリとタグが 2 つのセクションに表示されています。コンテンツの後に表示したくない場合は、twentyseventeen_entry_footer() 関数からカテゴリとタグコードを削除します。

したがって、新しいコードは子テーマで次のようになります。

 if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* カテゴリ、タグ、およびコメントのメタ情報を含む HTML を出力します。

*/

関数twentyseventeen_entry_footer() {

// .entry-footer が空の場合は出力したくないので、そうでないことを確認してください。

if ( get_edit_post_link() ) {

echo '<footer class="entry-footer">';

Twentyseventeen_edit_link();

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

結論

ご覧のように、ポストメタデータはさまざまな方法で表示できますが、最初にテーマ構造の基本を理解してから、可能であればそれに応じて調整することをお勧めします. これにより、テーマが壊れる可能性が最小限に抑えられます。 PS バックアップを作成することを忘れないでください。

この投稿が投稿メタデータの仕組みを理解するのに役立つことを願っていますが、関連する質問がある場合は、以下にコメントを投稿してください.