eng-labs

色々な人のブログを読んでいると、抜粋とアイキャッチが表示されている綺麗な「あわせて読みたい」というリンクを表示しているブログがありますよね。私も、是非そんな「あわせて読みたい」を綺麗にかつ、簡単に表示できるようしたいと思ったので、ショートコードを作ってみました!

今回作ったもの

今回作ったのは、こんな感じ!

あわせて読みたい
アイキャッチ

ボイスチャットをしながら快適にSWITCHができるAG03レビュー

Switchのゲームソフトのスプラトゥーンは家でもボイスチャットで遊べたら楽しいですよね? でも、スマホでSkypeなどを開くとゲーム音がマイクに入ってしまったり、声が聞こえなくなったり、何かと不便ですよね? そこでおすすめな商品がYAMAHAのAG03というオーディオミキサーです。

記事を書くときは、記事のパーマリンク(urlの一番下の文字列、この記事だと「wordpress-shortcode-awasete」の部分です。)を調べて指定するだけで完了です。

実際のコードはこんな感じです!

[awasete ag03-rev]

たったこれだけで、理想の「あわせて読みたい」のリンクが作れるようになります。

ちなみに、このブログのテーマですと、ある一定のサイズより小さいと、抜粋が表示されないようになっています。

実際のコード

では、実際に書いたコードを見てみましょう。

function read_together_box($attr){
    ob_start();
    $post_id = get_page_by_path($attr[0], "OBJECT", "post");
    if(is_null($post_id)){
        return ob_get_clean();
    }
    $post_id = $post_id->ID;

    $args = array($post_id);
    $my_query = new WP_Query(array( 'p' => $post_id ) );

    if($my_query->have_posts()) {
        while ($my_query->have_posts()) {
            $my_query->the_post();

            echo '<a class="inner_link hover_link" href="' . get_permalink() . '">';
            echo '<div class="awasete">';
            echo '<span class="awasete_hedding">あわせて読みたい</span>';
            echo '<div class="awasete_contents">';

            echo '<div class="awasete_eyecatch_wrap">';

            $post_thumbnail_id = get_post_thumbnail_id($post_id);
            if ($post_thumbnail_id === "") {
                echo '<img class="awasete_eyecatch" alt="アイキャッチ" src="' . get_template_directory_uri() . '/images/no-img.png" />';
            }
            echo '</div>';

            echo '<div class="awasete_text">';
            echo '<p class="awasete_title">' . get_post($post_id)->post_title . '</p>';
            echo '<p class="awasete_excerpt">';
            echo the_excerpt();
            echo '</p>';

            echo '</div></div></div></a>';
        }
    }
    wp_reset_query();
    return ob_get_clean();
}
add_shortcode('awasete','read_together_box');

remove_filter('the_excerpt', 'wpautop');

コードはシンプルで、あわせて読みたいで使いたい、パーマリンクを使ってpost_idを取得します。

取得したpost_idからqueryを生成し、あとは、htmlを整形して、アウトプットしています。

the_excerpt()関数で、moreタグまでの抜粋を掲載しています。文字数制限を加えていないので、moreタグが設定されていなかったりすると、長めの文章が表示されてしまいますので、別途文字数制限のコードを入れる必要があります。

このコードをfunctions.phpに貼り付ければ、ショートコードとして資料するだけです。

あとは、お好みでcssを設定しましょう。私は、下のコードのようなCSSを設定しています。

.awasete {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px #D4ECEE;
}

.awasete .awasete_hedding {
  position: absolute;
  display: inline-block;
  top: -9px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 15px;
  background: #ffffff;
  color: #555555;
  font-weight: bold;
  margin-bottom: 0;
}

.awasete .awasete_contents {
  display: flex;
  margin-top: 10px;
  margin-bottom: 0;
}

.awasete .awasete_eyecatch_wrap {
  flex: 1;
  margin-bottom: 0;
  margin-right: 15px;
}

.awasete .awasete_eyecatch_wrap .awasete_eyecatch {
  width: 100%;
  height: auto;
  margin-bottom: 0;
}

.awasete .awasete_text {
  flex: 1.75;
  margin-bottom: 0;
  color: #555555;
}

.awasete .awasete_text .awasete_title {
  font-size: 22px;
  margin-bottom: 0;
}

.awasete .awasete_text .awasete_excerpt {
  display: none;
  font-size: 15px;
}

@media  screen and (min-width: 830px) {
  .awasete .awasete_eyecatch_wrap {
    flex: 1;
  }
  .awasete .awasete_text {
    flex: 2;
  }
  .awasete .awasete_text .awasete_excerpt {
    display: initial;
  }
}

以上で、簡単に、「あわせて読みたい」のコードを作ることができます。

スポンサードリンク