賢威の投稿ページ上部に記事の抜粋を表示させる

公開日: 2014年02月15日
最終更新日: 2014年06月09日

抜粋

せっかく抜粋(meta description)を自分で考えて設定するのであれば、スペースがあればコンテンツとしても表示させたいですよね。今回の記事では、投稿ページの上部に表示させたアイキャッチ画像の横に、抜粋を表示させたいと思います。

もくじ

はじめに

前回、賢威の投稿ページで記事上部にアイキャッチ画像を表示という記事で、投稿ページの上部にアイキャッチ画像を表示させました。

投稿ページの上部

それだけで、スタイルシートなどは一切調整しておらず、ただ表示させただけです。

なので今回は、そこの部分のスタイル調整をするとともに、「抜粋(meta description)」を表示させるようにカスタマイズしたいと思います。

single.phpに、抜粋を読み込む関数を記述する

まずは、アイキャッチ画像の横に抜粋を表示させるため、single.phpにコードを記述します。

賢威の場合、抜粋を呼ぶ関数が独自に定義されており、
<?php echo the_excerpt_keni(); ?>
これを書き込むことにより抜粋を表示させることが出来ます。

ちなみに、Wordpressの標準の関数であれば
<?php the_excerpt(); ?>
ですね。

single.php(現在の状態)

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php the_post_thumbnail(); ?>
<?php get_template_part('social-button'); ?>

下矢印

single.php(コード追記後)

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php the_post_thumbnail(); ?>
<?php echo the_excerpt_keni(); ?>
<?php get_template_part('social-button'); ?>

ちなみに、4行目の<?php the_post_thumbnail(); ?>は、アイキャッチ画像を読み込むための関数です。

これで、アイキャッチ画像の下に抜粋を読み込むためのコードが記述されましたので、このようになりました↓
抜粋が表示された

しかし、このままだと、吐き出されるHTMLコードが以下のようになってしまいます。

吐き出されるHTMLコード

<img width="160" height="160" src="http://inosh.jp/wp-content/uploads/2014/02/140215.png" class="attachment-post-thumbnail wp-post-image" alt="アイキャッチ" />時間的にも作業的にも何かと面倒なアイキャッチ画像。トップページだけにしか表示されないのは、もったいない!ということで、投稿ページ上部にもアイキャッチ画像を表示させるよう、カスタマイズしたいと思います。

アイキャッチ画像の方はまだしも、これでは抜粋部分にスタイルを適用させることができませんね(タグで囲まれていないため)。

そのため、スタイルシートで装飾するために、pタグで囲んでID(クラス名でもよし)を振りたいと思います。

single.phpのアイキャッチ画像と抜粋を読み込んでいる部分を、以下のように変更します。

single.php

<p id="entry-top-eyecatch"><?php the_post_thumbnail(); ?></p>
<p id="entry-top-description"><?php echo the_excerpt_keni(); ?></p>

すると、吐き出されるHTMLコードがこのようになりますね↓

吐き出されるHTMLコード

<p id="entry-top-eyecatch"><img width="160" height="160" src="http://inosh.jp/wp-content/uploads/2014/02/140215.png" class="attachment-post-thumbnail wp-post-image" alt="アイキャッチ" /></p>
<p id="entry-top-description">時間的にも作業的にも何かと面倒なアイキャッチ画像。トップページだけにしか表示されないのは、もったいない!ということで、投稿ページ上部にもアイキャッチ画像を表示させるよう、カスタマイズしたいと思います。</p>

これで、自由自在にスタイルを適用させることが出来るようになりました。

スタイルシート(CSS)で装飾する

投稿ページ上部のアイキャッチ画像と抜粋部分のスタイルは、mystyle.cssに以下のように記述しました。

mystyle.css

#main-contents #entry-top-eyecatch {
    float:left;
    border:1px dashed #e41858;
    padding:4px;
    margin-right:15px;
    margin-bottom:15px; }

/* モバイル用スタイル */
@media (max-width:640px) {
#entry-top-eyecatch {
    width:20%;
}

#entry-top-eyecatch img {
    height:auto;
}
}

で、見た目はこのようになりました↓
アイキャッチ画像と抜粋にスタイルを適用

結局、抜粋部分にはスタイルを適用させることはありませんでした。

ちなみに、スタイルシートの下の方に記述している@media以降のコードは、モバイルで閲覧したとき用にアイキャッチ画像のサイズを調整するためのスタイルです。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む