書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】「前の記事」「次の記事」のデザインを変更する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

かきてぃー
皆さん、こんばんは。かきてぃーです。本業が忙しくなってきた今日この頃…。

本日は、個別記事にある「前の記事」「次の記事」のデザインを変更する方法を書いていきます。

かきてぃー
これのこと。

完成系は、サムネイルを付けてオンマウスで背景をグレーにしたいかな!

修正するのは『single-type1.php』のみ!

今回、修正するファイルは

  • single-type1.php

ただ一つ。面倒なことはないので、比較的カスタマイズし易いです!

では実際にソースを開いて、「ページナビ」という文字で検索をしてみて下さい。

141行目に<!–ページナビ–>という表示があれば、そこが「前の記事」「次の記事」を設定しているロジックになります。

関連記事の下にあって、p-navi clearfix っていうdivクラスで囲っていますね。

今回はこのdivクラス全体を修正します。

『p-navi clearfix』を丸ごと削除して新しいクラスを作成

を全て削除します。

<dd>とか<dl>のタグが個人的に嫌いなので丸ごと変更します。

新しく記述する前に、どこからどこまでがページナビなのか分かるようにENDを書いておきましょう。

かきてぃー
そうすれば、今後見た時にも分かりやすいので!

そして、今回はサムネイル付きをイメージしているのでモバイルとPCでサムネイルサイズを分岐する必要がありますね。

※分岐しないで、画像サイズだけ変更する方法もあるがパフォーマンスが下がるので分岐することをおススメします。

  1. 全体をdivで囲む
  2. モバイル分岐を使う
  3. 「次のページ」「前のページ」の有無を分岐する
  4. それぞれのデザインを記述する

全体の流れはこんな感じで進みます。

全体をdivで囲む

まずは全体をdivで囲んでおきましょう。

この場合、モバイル・PC共に同じcssの設定になるのでモバイルとPCでデザインを分けたい方は次のモバイル分岐でdivを使いましょう。(後ほど説明します。)

モバイル分岐を使う

次はモバイル分岐の記述です。

[https://kakitare.info/web/if-mobile/]

の記事でモバイル分岐の説明を詳しくしましたので、詳細は割愛します。

こんな感じになりますね!

先ほどのモバイルとPCでcssのデザインを変更したい方は…

このようにモバイル分岐の中にdivをそれぞれで囲めば出来ますね!

「次のページ」「前のページ」の有無を分岐する

「次のページ」が存在するのか?などのチェックは欠かせません。

最新記事や最終記事を閲覧している際には、「次のページ」や「前のページ」は存在しませんので考慮する必要がありますね。

重要なのは

の部分。

ここは、次のページがあるかないかを判断し、それぞれの変数に格納しているだけです。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_adjacent_post

その後、

にて、trueがあることを確認しています。

前のページ or 次のページ

があったら~

というif文ですね。

かきてぃー
各所にコメントを入れています。

次の分岐で「前の記事があったらのデザイン」「次の記事があったらのデザイン」を判定します。

日本語で書くと、

こんな感じになりますね。

後は、各所にデザインを書いていきます。

それぞれのデザインを記述する

記事情報の分岐で取得した、prevpostとnextpostを使っています。

その記事情報のタイトルやサムネイルを取得し、出力してデザインを表現しています。

これで、出力すると…

のようなデザインになりますね。

ちなみに、モバイルではサムネイルを表示させないようにしています。(重いから)

スポンサーリンク

デザインがサイトに反映されない場合

※2017年4月18日追記

うっかりしてました。恐らく、子テーマに「single-type1.php」もしくは「single-type2.php」を格納し修正しただけではサイトに反映されないはずです。

「single.php」を子テーマに格納し、パスの設定を変えなくてはならない!

かきてぃー
これを忘れてました…くぅ…申し訳ない…

親テーマの「single.php」を丸ごとコピーして子テーマに格納します。

「single-type1.php」が対象なら5行目、「single-type2.php」が対象なら3行目、面倒なら両方を修正します。

STYLESHEETPATH はスタイルシートが有効になっているパスを返してくれます。

子テーマに「style.css」が存在すれば、子テーマの「single-type1.php」を参照してくれるようになり、サイトに反映されます。

TEMPLATEPATH のままだと、いくら子テーマに格納しても、親テーマの「single-type1.php」を取得するので全く意味がありません!!

私は「single.php」を直にカスタマイズしているので、認識がまるでなかった…

コメントを下さったmikaさん。ありがとうございました。

完成系

かきてぃー
さらにカスタマイズしてみても面白いかもしれないですね。
  • コメント数など取得してみたり
  • リツイート数など取得してみたり
  • カテゴリやタグなど取得してみたり

カスタマイズの幅は広いです。

完成系イメージ

PC

モバイル

cssのデザイン

忘れるところでした。

cssのデザインを書いておかないといけないですね!

完成系イメージと同じようなデザインにするなら、上記cssを貼り付ければOKです!

かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











Comment

  1. mika より:

    はじめまして、私もAffinger4の愛用者です。

    私も「前の記事・次の記事」のデザインが気になっていました。直前までStinger Plusを使用していて、同じようにこの部分のデザインをサムネイル付きにしていたので同じようなデザインにしたくてググった結果、かきてぃーさんのこの記事を拝見しました。

    公開してくださっているphp・cssをその通りコピペで反映させているはずなんですが、私のブログでは表示されません。(既存のデザインのまま変わりません)
    キャッシュは変更した度にかけましたし、変更する部分も何度と確かめ、CSSも追記しています。が、表示が崩れるならまだしも(反映してる証拠だから)、全くデザインが変わらないのは何かに問題があるからでしょうか。試しにsingle-type2のphpも変更しアップロードしてみたりしましたが、変化なしです。(今は元に戻しています)

    初めてのご連絡で教えてくださいというのも気が引けますが、もしこの現象について考えられることがありましたら共有して頂けると大変助かります。

    • かきてぃー かきてぃー より:

      mikaさん
      始めまして。かきてぃーです。
      コメント頂きありがとうございます。
      全くデザインが変わらないということから考えられるのは…
      ・そもそも反映するファイルが違う
      ・キャッシュが残っている
      のどちらかだと思われるのですが…ブログを拝見しないと何とも言えないですね。
      まず、確認頂きたいのが”個別投稿ページにはどのphpテンプレートが使われているか”です。

      < 投稿ページで使われているテンプレートを確認する方法>
      1,個別投稿ページ「single.php」を子テーマに配置しロジックをカスタマイズしていないか。
      → YESの場合、カスタマイズしているソースを見ないと何とも…

      2,「AFFINGER4管理画面」より「表示を変えるカテゴリ(カテゴリID又はスラッグ※上級者用)」を指定しているか。
      → YESなら「single-type2.php」をカスタマイズ、NOなら「single-type1.php」をカスタマイズします。
      参考:https://kakitare.info/web/analysis_affinger/#stdata74

      試しにカスタマイズする「single-type1.php」に142行目

      の真下に

      を追加し、反映されるかテストすると対象ソースが分かりますよ。

      3,新しく追加したの直前にif文で分岐させていないか。
      → if文にて表示させない設定になっていませんか?

      それでも原因が分からない場合は、よろしければ解析致しますので下記URLの問い合わせフォームより
      ご自身のブログ情報をご教示ください。

      もしくは、「single-type1.php」のソースを丸ごとコピーして送ってください。

      https://kakitare.info/communication/

      • mika より:

        かきてぃーさん、ご丁寧にありがとうございます。
        ご指摘くださった確認ポイントはどれも心当たりがなく行き詰りです。お言葉に甘えて頂きましたお問い合わせURLよりご連絡させて頂きましたのでご確認くださると幸いです。

        • かきてぃー かきてぃー より:

          かなり単純な原因でした。。。
          私の考慮ミスで、申し訳ありません!メールに詳細はお送り致しましたが、記事にも追記させて頂きました。

コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.