2012年08月25日 category : WordPress tags :

WordPressの「続きを読む」を画像とCSSでカスタマイズする方法

このエントリーをはてなブックマークに追加

readmore

WordPressの「続きを読む(Read More)」を画像に変更し、併せてCSSで装飾を行います。

各記事はthe_content() で呼び出しますが、記事内に<!–more–>がある場合、その<!–more–>までを表示し続きをリンクで表示します。「続きを読む(more…)」は文字リンクで表示されますが、この「続きを読む(more…)」を画像に変更します。

01 . 画像のアップロード

画像をサーバの「使用しているテーマ/images/」にアップロードします。名前はなんでもいいのですがここでは「more.jpg」としています。

02 . 呼び出し部分の変更

the_content()の呼び出し部分を以下に変更します。テーマによって異なりますが多くは「index.php」にあると思います。

<?php the_content('<img src="'.get_bloginfo('template_directory').'/images/more.jpg" alt="Read More" title="Read More" width="150" height="30" />'); ?>

画像の場所を指定し、alt, titleを付加しています。横幅(width)高さ(height)は用意した画像のサイズに合わせて変更してください。

03 . 続きを読むをスタイルシートに追加

表示する位置などを変更するにはCSSを利用します。続きを読むには「more-link」というクラスが割り当てられていますので「style.css」に以下を追加しサーバにアップロードしてください。

.more-link img{
	/* ここに処理を書く。例 */
	margin-top: 5px;
}

単調な文字リンクの「続きを読む」が画像になることでブログの雰囲気がまた変わります。簡単に変更できますのでぜひやってみてください:)

HOME >>  WordPress > WordPressの「続きを読む」を画像とCSSでカスタマイズする方法