続きを読むボタンはどこだ？STINGER8で表示させるカスタマイズ方法

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

「STINGER8」はワードプレス(WordPress)で使える人気の無料テンプレートですが、デフォルト設定では投稿記事や関連記事に「続きを読む」ボタンがありません。

記事を読む為にはアイキャッチ画像をクリックするか、タイトルのテキストリンクからでないと閲覧できないので、インターネットに慣れていない方には少しわかりづらいかもしれません。

「続きを読む」の表示があると、ユーザーの方も迷うことなく興味のある記事を閲覧することができるので、ユーザビリティの向上にも役立ちます。

そこで今回は「続きを読む」ボタンをSTINGER8に設置する方法や、CSSでボタンをカスタマイズして表示させる方法などをご紹介していきたいと思います。

「続きを読む」ボタンをSTINGER8に設置する方法

STINGER8に「続きを読む」ボタンを設置する為には、ワードプレスの「functions.php」を編集する必要があります。

「functions.php」編集時の注意点

「functions.php」ファイルの編集は「style.css」などの編集とは違い、入力コードを少しでも間違えていたり、1つでも記号が抜けていたりするとワードプレスにアクセスできなくなってしまいます。

なので、ファイルを編集する前に「FTPソフト」などを使って、必ずパソコン側にバックアップ用として「functions.php」ファイルをダウンロードしておいて下さい。

ファイルの場所はFTPソフト起動後、「対象ブログURL」⇒「public_html」⇒「wp-content」⇒「themes」⇒「stinger8-child」⇒「functions.php」の順に進めて下さい。

もし、ワードプレスにアクセスできなくなった場合は、以下の記事を参考にして復旧作業を行ってもえればと思います。

参考：「functions.php」の編集後に画面が真っ白！原因とエラーを直す方法

編集してボタンを設置する前の記事一覧

「続きを読む」ボタンを設置する前の記事一覧は以下のようになっています。

アイキャッチ画像に記事タイトル、説明文が表示されていますが文末は「･･･」となっていて、「続きを読む」ボタンがない状態です。

この場合、パッと見た感じでは記事へのリンク先がどこにあるのか、すぐに見つけることができない可能性があるので、ここに「続きを読む」のリンクを設置していきます。

「functions.php」を編集してボタンを設置する

記事の文末を「･･･」と表示するよう記述されたコードを、親テーマ「functions.php」から探します。

ワードプレス管理画面から「外観」⇒『テーマの編集』をクリックします。

子テーマが選択されていると思いますので、親テーマ「STINGER8」に変更してテンプレート項目から、『functions.php』をクリックします。

「functions.php」ファイルの中から、少し下にスクロールしたところにある以下のコードを見つけて下さい。

// 文末文字を変更する
if ( !function_exists( 'st_custom_excerpt_more' ) ) {
	function st_custom_excerpt_more( $more ) {
		return ' ... ';
	}
}
add_filter( 'excerpt_more', 'st_custom_excerpt_more' );

上記コードの4行目にあたる「return ‘ … ‘;」が記事の「･･･」の部分になります。

ここのコードを子テーマ「STINGER8 Child」のfunctions.phpファイルの方に、コピー＆ペーストして下さい。

※親テーマで編集するとアップデート時に編集内容が上書きされてしまう為。

すでに上記のコードが子テーマにある場合はここでの作業は必要ありません。

子テーマの「functions.php」にコードがコピーできたら、4行目の部分を以下のコードに変更しましょう。

// 文末文字を変更する
if ( !function_exists( 'st_custom_excerpt_more' ) ) {
	function st_custom_excerpt_more( $more ) {
		return '...<p class="readmore_right"><a href="'. get_permalink() .'">続きを読む</a></p>';
	}
}
add_filter( 'excerpt_more', 'st_custom_excerpt_more' );

「return ～ </p>’;」のコードに変更できたら、下にある『ファイルを更新』をクリックすると、「続きを読む」ボタンの設置に関する編集は完了です。

記事を確認すると説明文の左下に「続きを読む」ボタンが設置されているかと思います。

設置するだけならここで終了となりますが、ボタンの配置を変更したりカスタマイズして表示させたい方は、ここからご紹介する内容も参考にして下さい。

「続きを読む」ボタンの配置を右寄せにする

STINGER8の場合は左側にボタンがあるよりも右側の方がバランスがいいので、子テーマの「スタイルシート (style.css)」を使用してカスタマイズしていきます。

スタイルシート (style.css)で配置を変更

ボタンを右寄せにする為に、スタイルシート (style.css)の一番下に以下のコードを追記します。

/*-- 続きを読むボタン --*/
.readmore_right {
	text-align: right;/*ボタンを右側に移動*/
}

後はファイルを更新すれば、以下のようにボタンが右側に移動して表示されます。

「続きを読む」をもっとアレンジしたい場合は、さらにstyle.cssでカスタマイズします。

「続きを読む」ボタンをカスタマイズする

ボタンを設置しただけではリンクが表示されているだけなので、もっと印象的なボタンらしいものに編集していきます。

ボタンのデザインをstyle.cssで変更

「続きを読む」のボタンデザインを変更するには、style.cssに以下のコードを追加して下さい。

.readmore_right a {
    color: #fff;/*文字色*/
    font-size: 14px;/*文字のサイズ*/
    background-color: #228b22;/*背景色*/
    border-radius: 2px;/*角を丸める*/
    padding: 5px 5px 5px 5px;/*上下左右の余白*/
    text-decoration: none;/*文字の下線なし*/
    transition: 0.5s;/*色が変化する秒数*/
}

.readmore_right a:hover {
	color: #fff;/*ホバー時の文字色*/
    background-color: #0000ff;/*ホバー時の背景色*/
}

上記コードを追加することで文字色や背景色、カーソルホバー時の色などを編集できます。

説明文も記載していますので、ブログやサイトに合ったものに変更してお使い下さい。

今回のコードを追加した場合は以下のようなボタンになります。