affinger5

記事レイアウトで損してる!直帰率を下げる、コピペでできるaffingerカスタマイズ方法。

eyecatch

当サイトの運営はエックスサーバー で行っております。


りくの前置き

記事の構成をテーマのデフォルトのまま使ってはいませんか?

一回の訪問でたくさんの記事を見てもらうために

目に付きやすい位置に他の記事のリンクがあることが必須です。

5分ほどで終わる簡単作業

直帰率が下がるレイアウトを紹介します!

AFFINGER向けですが、他のテーマでも応用できますのでぜひ見てみてください。

直帰率とは?

あなたのブログのある記事を見に来てくれた人の何%がそのまま去ってしまったか

この割合が直帰率です。低いほど良いのです。

例えば10人が、記事Aを見に来てくれた場合。

そのうち3人は記事Bに、7人はブラウザバックしたとすると

直帰率は70%になります。

直帰率を下げる方法

直帰率を下げるにはとにかく、

他の記事を見たい!と思ってもらうことが大切です。

 

そこで今回は記事ページの終わりのレイアウトを変更することで

他の記事に飛んでもらいやすくなる方法を紹介します!

affinger限定の方法ですが、5分ほどで終わる簡単作業です。


記事レイアウトの変更内容

今回の方法で以下のようなレイアウト変更が可能です。

Before

記事終了後に、SNSボタン→コメント→関連記事→ページナビ(次の記事)

Bad!

記事が終わってからSNSボタン・コメント欄が続くので、

ブラウザバックしやすい。

After

記事終了後に、関連記事→ページナビ(次の記事)→SNSボタン→コメント

after1

Good!

記事の終わりに、すぐに関連記事・新着記事の紹介ができている。

どうでしょうか?

読み終わった直後に「こんな記事もあるよ?」

と似た記事を提案してあげることで

直帰率が下がることが期待できます。

具体的なレイアウト変更方法(Affinger)

今回はphpを書き換えることでレイアウトの変更を行います。

そのため前準備としてFTPソフトで

子テーマに、親テーマの"single.php"と”single-type1.php”をコピーしてから作業を進めます。

親ファイルのものを直接書き換えると、テーマのアップデートの際に変更が消えてしまいます。

以下、参考記事です↓↓

eyecatch
カスタマイズ前に必読!親テーマ・子テーマを理解してデータ消えを防ぐ。

親テーマ・子テーマを理解していますか?何もわからずにコピペでカスタマイズをどんどん進めると取り返しがつかなくなるかもしれません!
この記事では親テーマ・子テーマとカスタマイズの関係について、分かりやすく図解で説明しています。
CSSやPHPをいじり始める前に是非御覧ください。

続きを見る


 テーマの編集画面から開く

「ダッシュボード」→「外観」→

「テーマエディタ」と進みます。

テーマ選択single-type1

「編集するテーマを選択」から”WING-AFFINGER5-Child”を選択

(子テーマにsingle-type1.phpをコピーしてからおこなう。)

エディタの右の項目から”single-type1.php”を選択します。

このファイルは記事ページの構成がかかれたものです。

エディタ画面を編集

エディタ画面を見ると文字がビッシリで「うわー、、」だと思います。

それぞれの文章を機能ごとに分解しながら見ていきましょう。

Before

↑記事の終わりがここ

↑ランキング表示(設定してなければ何も出ないので無視)

↑SNSのボタン&タグ・カテゴリの表示

↑コメント投稿ボックス

↑関連記事

↑ページナビ(NEXT,PREV記事のリンク)

※ 「NEXT」→「次の記事」などに書き換えると分かりやすいですね。

分解していくと分かりやすいですね。

一つの画像で一つの機能の塊になっています。

この組み合わせを変えることで

好きに順番を変えることができます。

私は以下のように組み合わせを変更しました。


After

好きな組み合わせに変更できたら

左下の「ファイルを更新」をクリックして変更を適用しましょう。

子テーマのsingle.phpを書き換え

「外観」→「テーマエディタ」から

子テーマのsingle.phpを表示します。

singel.php書き換え

上記の画像のように、

「THEMESHEETPATH」→「STYLESHEETPATH」

に書き換えましょう。

これにより親ではなく、先程組み合わせた子テーマのsingle-type1.phpを読み込むようになります。

最後に記事ページで順番が変わっていることを確認しましょう。

これで記事を読み終わった人が他の記事に行きやすくなりました!

変更お疲れさまです!


まとめ

今回は、直帰率を下げるための記事レイアウトについて紹介しました。

記事の途中に関連となるような記事のブログカードを挿入することも非常に効果的です。

しっかりとバックアップを取って是非試してみて下さい!

関連記事

eyecatch

affinger5

【affinger5】おしゃれ&見やすさ重視 初心者向けのカスタマイズ

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

eyecatch画像

affinger5

【affinger5】Twitterのブログリンクを画像付きにするには? Twitter カードを解説

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

よく読まれている記事

プロジェクターアイキャッチ 1

10万円で手が届く、高画質・高機能のプロジェクターの選び方、おすすめの商品を紹介しています。
解像度、コントラスト、明るさ、機能性、値段などからあなたに最適のプロジェクターを紹介します!
最近増えてきた、モバイル用プロジェクターや変わり種も!

motorscooter_eyechatch 2

当サイトの運営はエックスサーバー で行っております。 悩んでる人日常の足になるような電動バイクってどんな種類がある? 通 ...

vezel_eyecatch 3

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

eyecatch 4

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

-affinger5
-, ,

Copyright© りくぶろぐ ~ブログ×ガジェット×モビリティ~ , 2020 All Rights Reserved Powered by AFFINGER5.