ワードプレス最高峰テーマGenesisで続きを読むをカスタマイズ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ワードプレスでは「続きを読む」をMoreタグで設定できます。ただ、テーマによっては「Moreタグ」を使わなくても自動で「続きを読む」が表示されるので使用するかどうかは運営状況で変わってきます。

ワードプレス最高峰テーマGenesisで続きを読むをカスタマイズ

ちなみにカスタマイズ前の標準状態では以下の見た目となっています。

続きを読むは「Moreタグ」で設定可能です。好きな箇所でタグを挿入すればOK。

先述した通り、導入しているテーマによっては「Moreタグ」が自動設定される場合があります。文字カウントで一定の文字数以降は「続きを読む扱い」にした方が更新時の作業としては手間がかからないからです。

続きを読むをカスタマイズする方法

本来は「single.php」を直接カスタマイズするのですが、今回の方法は「functions.php」からコントロールする方法をご紹介させていただきます。実装はとてもカンタンなのでご安心くださいませ。

//続きを読むをカスタマイズ
function post_content_read_more_link_customize() {
	$html = '<a class="more-link" rel="nofollow" href="' . esc_url( get_permalink() ) . '" rel="nofollow">⇒ コンテンツの続きを読む</a>';
	return $html;
}
add_filter( 'the_content_more_link', 'post_content_read_more_link_customize' );

実装したあとの状態が下記です。

デザインのカスタマイズはCSSを追記

最終的には全体にボックスを敷いて、左側の矢印を省略して、右側にシンプルな矢印を設定。

マウスを重ねると色が反転するように追加設定。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください