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

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

【AFFINGER4-カスタマイズ】ソーシャルボタンにRSSとFeedlyを追加する

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

今回のカスタマイズはSNSエリアに表示されているボタン

  • Twitter
  • Facebook
  • Google+
  • はてブ
  • LINE
  • Pocket

の6種類に「RSS」「Feedly」を追加する方法です。

イメージ的にはこんな感じ。

なぜ増やすのかって?

かきてぃー
その方がカッコイイからだよ!w

なんて冗談はさておき。カスタマイズを開始しましょう。

カスタマイズするファイルはどれ!?

毎度、同じです。

カスタマイズするファイルを洗い出しましょう。

「AFFINGER4 管理画面」の設定にもよりますが、

  • トップページ(home.php)
  • 固定ページ(page.php)
  • 個別ページ(single-type1.php)

にSNSボタンが表示されている事が多いですね。

それぞれ、SNS(ソーシャルボタン)の呼び出しを確認してみると、

となっているようです。

固定ページをトップページに設定している場合もif文にて条件分岐され、「sns-top.php」が呼び出されるようになっていました。

つまり

  • トップページのソーシャルボタンをカスタマイズするなら「sns-top.php」を。
  • 個別ページや固定ページのソーシャルボタンをカスタマイズするなら「sns.php」を。

となります。

かきてぃー
今回のカスタマイズはトップページも個別・固定ページも同じようにカスタマイズするので、ロジックは意識しなくてもよさそうですね。

追加するソーシャルボタンのロジックを作成

カスタマイズ前に追加する「RSS」「Feedly」のロジックを用意しましょう。

これが、追加するロジックになります。

「sns-top.php」「sns.php」それぞれに追加していきます。

「sns-top.php」のカスタマイズ

LINEボタンの次(98行目付近)に先ほどのロジックを追加します。

cssをカスタマイズしていないので、文字だけ追加されたような形になりますね。

デザインは後ほど、まとめて修正致しますので、

  • ボタンが押せて
  • リンクが有効になっていれば

OKです。

「sns.php」のカスタマイズ

カスタマイズ方法は「sns-top.php」と同じですね。

60行目の下。

</li>と</ul>タグの間に「RSS」「Feedly」ロジックを追加します。

個別ページや固定ページにもトップページ同様に文字とリンクが追加されていればOKです。

スマホとPCでクラスを分ける

デザインを整える前に、「sns-top.php」「sns.php」2つを条件分岐にて整えます。

「sns-top.php」

①28行目~100行目の

をコピーして下さい。

コピーが完了したらスマホ分岐を行う為に以下のように修正します。

②27行目に

③102行目に

④103行目に

①でコピーした元の<div class=”sns”>~~~~~~</div>を貼り付け

⑤177行目に

⑥29行目の<div class=”sns”>を

に変更

ちょっとややこしいですけど、スマホとPCのCSSクラスを分ける為に書いています。

面倒な方は↓コピペで大丈夫です。

「sns.php」も同様に修正します。

スポンサーリンク

「CSS」をカスタマイズしてデザインを整える

2つのボタンを追加したことによって6つから8つに増えました。

デフォルトの配置は3×3なので4×4に変更していきます。

これで、一通りの対応が完了致しました。

デザインを確認してみます。

PC

スマホ

こんな感じで表示されていれば、ばっちりです!

スマホ表示もレイアウトが崩れていなければ問題なし!

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











コメントはこちらです

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