Wordpress

【コピペでできる】AFFINGER4で改ページボタンの上に次ページ誘導用のタイトルを追加する方法

投稿日:2018年1月3日 更新日:

AFFINGER4で次ページに誘導するタイトルをつけよう

こんにちは、セム(@ssem1622)です。

最近いろんなスマホ版ページで見かける「改ページ」、PV数も増やしやすいということでニュースサイトなどで多く使われています。

AFFINGER4でこの機能が使えることを知ってから豆ブロでも使っていたのですが、前々から気になっていたのが改ページの際に次の内容が表示できないこと(ボタンだけ表示される)。最初は自然に次のページに誘導するためにわざわざ文章を追加していたのですが、豆ブロの場合スマホでのみこの機能を表示させているため、文章を追加するとPC版の場合に不自然になってしまっていました。

なんとか離脱させず自然に次のページに進んでもらう(【次のページへ】をタップしてもらう)ためにはどうすればいいか考えた結果、ついに答えが見つかりました。このカスタマイズでは上の画像のように【次のページへ】ボタンの上に1行で次ページの内容を表示させます

カスタマイズというほどの立派なものではないですが、スマホ読者が多く、長文を書くブロガーの方におすすめです。コピペでできる簡単カスタマイズなので試してみる価値ありですよ~



コードの構造はとてもシンプル

上記の図のように、【次のページへ】ボタンの上に小さく1行追加します。また、PC以外でのみ表示されるようにショートコードを追加します。

編集画面では下図のようになります。

nextpage2


<!--nextpage--> 

要領は簡単で、タイトル部分をPC以外で表示させるショートコードである

AddQuickTagに登録して繰り返し使う

この内容は繰り返し使う内容なので、いちいち入力するのは時間がもったいないです。ですのでAddQuickTagというプラグインに登録してしまい、すぐに呼び出せるようにしましょう。

addquicktagに追加

AFFINGERタグを使ったらもっとシンプルになるかも…と思ってやってみたのですが、残念ながらタイトル部分は毎回の記事ごとで変わるのでショートコードでの実現は無理そうでした。というわけで無理矢理感はありますがAddQuickTagに登録して呼び出すことにしました。呼び出し後、ビジュアルエディターでタイトルを編集するだけなので簡単です。

というわけで今回はAFFINGER4で改ページタグを使用の際に自然に誘導するためのタイトルをつけるカスタマイズをご紹介しました。タイトル部分はFont AwesomeのWebフォントを使ったり、AFFINGER4に用意されているスタイルなどを組み合わせるとさらに見栄えがよくなります。

というわけで、今回はAFFINGER4で改ページ使用の際の誘導タイトルをつける方法をご紹介しました。

セム
簡単で、かつ読者にもやさしい機能なのでぜひお試しくださいね~

WordPress使うならこのサーバー!



X-lift_test_180229

  • この記事を書いた人

セム(@ssem1622)

韓国ソウルの某企業で日本マーケティング統括として働く豆(育休中)。Udemyでイラストを教えたりなど、コンテンツを作って収益化するのが趣味であり仕事。 プロフィール詳細ページはこちら

-Wordpress
-, ,

Copyright© 枝豆ブログ、略して豆ブロ , 2018 All Rights Reserved.