WordPress公式テーマなどで抜粋を表示し「続きを読む」のリンクを設置する方法

WordPressで公式テーマ以外のテーマを使う理由の一つは、トップページに記事の抜粋を表示し、「続きを読む」というリンクをクリックすると全文が読めるようにすることができることです。しかし、プラグインを使えば、この機能は簡単に実装できます。

Advanced Excerpt

たぶんこのプラグインが一番いいです。このプラグインで作られる全文へのリンクを、このブログみたいに黄色の背景で、角が丸いボタンにするには、以下のコードを子テーマのstyle.cssまたはカスタマイズの追加CSSに書き込みます。

a.read-more {
	color:#ffffff !important;
	background-color:#ffcc00;
	padding:10px;
	font-weight:bold;
	border-radius:15px;
}

a:hover.read-more {
	color:#0000ff !important;
}

立体感をつけたい場合は、もう少し工夫がいりますが、普通、これで十分です。ちょっと濃いめの黄色に白い文字になります。マウスのポインターを持って行くと、文字が青色になります。

Easy Custom Auto Excerpt

お金を払うとProバージョンが手に入り、いろいろカスタマイズできますが、わざわざお金を払うまでもありません。こうすれば同じです。

a.ecae-link {
	display:block;
	width:100px;
	margin-top:10px !important;
	margin-left:3px !important;
	padding:5px 5px 5px 5px;
	border-radius:15px;
	background-color:#ffcc00 !important;
	color:#000 !important;
}

widthは適当な長さに調節して下さい。立体感をつけるには、コードを増やせばいいです。しかし、立体感は必要ないと思います。

このプラグインは、自分ではカスタマイズがしにくいように工夫してありますが、上記のコードで解決します。「!important」が必要なところが味噌です。15分ぐらいでできました。

なお、このプラグインのProバージョンは、有効期限がたった1年です。しかし、購入前に有効期限が存在することが明示されていません。うまく行かないと思ったら、ライセンスの有効期限が切れていた・・・なんて話になりますので、絶対にProバージョンを買ってはいけません。

関連ページ:
抜粋の「続きを読む」のボタンをかっこよくする/Advanced Excerpt