Affinger3に続きを読むボタンを実装する:ド素人のカスタム日記

      2016/03/11

Affinger3に続きを読むボタンがない!!どうしよう!

生徒
Affinger3って、トップページの投稿一覧に”続きを読む”ボタンがなぁい!!!!!大事件です!
先生
んーいやほら、シンプルなデザインが人気のテーマだからないんだよ。Stinger5にはあったけどね。進化だよ!きっと!
生徒
それはそうなんだけど、やっぱり私のサイトではあったほうがUsability(ユーザービリティ)がよくなるし・・・!でもfunction.php・・・触るの怖い・・・。
先生
大丈夫!そんなに難しくないよ!一文追加するだけだし、すぐできちゃうよ!
生徒ホントですか??やったぁ♪

 

ふぅー、こんな風に身近に助けてくれる人がいるといいんですが、私の場合は自分でしないといけないので、function.phpを触るのはいつも心臓バクバクです。いろいろ調べながらなんとか実装できたので、私の備忘録として残して置きたいと思います♪

スポンサーリンク

Affinger3に”続きを読むボタン”を実装してみたのでそのご紹介♪

今回使用するのは、親テーマのAffinger3のfunction.phpです。

function.phpは少しのミスでサイトが真っ白になる危険性をはらんでいるので・・・

  • ① 慎重に作業を行う。
  • ② 必ずバックアップをとってから行う。
  • ③ サーバー側のFTP内のfunction.phpを修正できる人のみ挑戦しましょう!

③は記述ミスがあった場合、直接サーバーにアップされているファイルを修正する必要があるためです。(ローカルで修正しアップロードもできます。)

サイトが真っ白になったときは、元の記述に戻せば直るのですが、その元の記述を完全に再現する必要があります。それができなかった時のために、バックアップを取っておきましょう!ミスをしたとたんワードプレスの管理画面にすらアクセスできなくなることもあるので、管理画面からは修正はできません。

上記3つに注意してから作業を行いましょうね。

※いまからご紹介するのは、あくまで私の成功した例です。ご利用は自己責任でお願いいたします。

で、どこに一文を追加するの?

ワードプレス管理画面のテーマの編集から親テーマであるAffinger3を選択し、その中のfunction.php内で下記の記述を探しください。

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

この中から、変更するのは、return ' ... '; の箇所です。

ここをreturn '...<p class="readmore_center"><a href="'. get_permalink() .'">続きを読む</a></p>';に書き換えます。

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

これで完成です。

ここではpクラスの名前を"readmore_center"にしているので、CSSでデザインを設定するときは、下記のように記述すればデザインを変更できますよ♪

.readmore_center {   }
.readmore_center a {  }

また表示させる文字を”続きを読む”以外にしたいときは書き換えてください。

ただし、書き換えの際に<>などを消してしまわないように細心の注意を払うようにしましょう!また、余分な全角なども絶対に入れないようにしましょう!サイトが真っ白になります・・・。

今回参考にさせていただいたサイトはこちら↓
WordPressのSTINGER6で「続きを読む」を表示する方法

おかげさまでAffinger3でも「続きを読む」を表示できました。本当にありがとうございます。ド素人の私の説明よりわかりやすいので、ぜひこちらのサイトをご参考にされてくださいね♪

CSSでデザイン調整をしてみよう!

留学経験なしで英検1級・TOEIC満点! みんなのペラペラ英会話トレーニング道場♪

私はボタン風にしたかったので下記のようにしました。

/*記事を読むボタンはここから*/
.readmore_center {
padding-top:7px;
text-align:center; /*①続きを読むをセンター表記*/
}

.readmore_center a {
padding:2px 20px; /*続きを読むボタンの幅調整*/
text-decoration:none;
color: white;
background-color:#ff3366; /*ボタンの色はここを調整*/
border-radius:5px; /*角を丸める*/
}
.readmore_center a:hover {
background-color:grey; /*マウスホバー時の色変更*/
}

これで写真のようにボタン風になりますよ♪写真はボタンにマウスオーバーさせているので、ボタンがグレイになっています。

それにしてもうまくできてよかった。Affingerにテーマを変えて2日目。ようやく満足のいくサイトデザインになってきました。

 

オンライン英会話講師・フリー翻訳者
資格:TOEIC990点・英検1級
英語学習を頑張っている生徒さんの少しでもお役に立てればと、英語学習法や英語表現をまとめています。(自分の勉強にも役立っています♪)
このブログが英語学習に少しでも役だったと思ったら、ページ下部のシェアボタンのいずれかをポチっとしていただけると嬉しいです。

 - ワードプレス