【Word Press】テーマ「Travelify」のカスタマイズ~スマホ用SNSリンク追加編

旅行記ブログで使用するテーマ「Travelify」

前回自作して設置したSNSボタン
PC上で見たらうまくいっていたのですが

 
スマートフォンで見たらこんな風にガタガタ

Word Press SNS シェアボタン自作

これはずいぶん見苦しい

ということで何とか解決しようと
また賢人たち記事をあさる

あれこれ試した上で、以下のやり方が一番
丸くおさまったので念のため手順をまとめます

本日のお題

  • スマートフォンに対応するレスポンシブなSNS自作ボタンを追加
  • 最低、FacebookとTwitter、LINEだけでもOK

使用するWord Pressテーマ

Travelify

<参考にさせていただいた賢人の記事>

当記事ではFacebook、Twitter、LINEの3種類のみ
instagramとPocketも追加したかったが
コードの調整が面倒だったので今回はあっさり割愛

いじる必要のあるPHPファイル

【親テーマ】
  • 1.「content-extensions.php」
    注)子テーマでは反映しなかったので親テーマのPHPファイルを直接いじる
     ┗ 投稿ページ内をいじるにはこのPHPファイル。第一階層にある「singler.php」ではないので注意

    【ファイルの所在】

    ドメイン/wp-content/themes/travelify/library/structure/content-extensions.php

  • 2.フォルダ「images」
     ┗ SNSボタン用の各アイコン.pngをアップロード
【子テーマ】
  • 2.「functions.php」
     ┗ スマホ向け判定ロジックを記載(内容は何のことやら分かりません)
  • 3.「style.css」
     ┗ 位置や枠のサイズなどを調整するコード

    【ファイルの所在】

    ドメイン/wp-content/themes/travelify-child/(それぞれのPHPファイル)

設定ポイント

細かい手順は上述の参考記事をご覧ください。こちらではあくまでポイントのみ

1.「content-extensions.php」ファイルの場合

  • 243行目からの投稿ページエリア、283行目「</div>」の後に「<?php if (is_mobile()) : ?>」~「<?php endif; ?>」まで挿入→保存
  • PCのコードを消すために「<div class=”share-pc”>」~「</div>」まで削除
  • 代わりに既存の<?php include( STYLESHEETPATH . ‘/shared-button.php’ ); ?> を挿入 →保存
  • 投稿ページ末尾にもSNSボタン貼っているので同様の作業→保存

Word Press SNS シェアボタン自作

2.フォルダ「images」の場合

  • 指定されたサイトからFacebookとTwitter、LINEアイコンをダウンロード
  • 親テーマ直下の「images」フォルダへアップロード
    ※本当は子テーマにimagesフォルダを新規で作りそちらにアップロード→リンク付けしたいのですがすぐにコードが思いつかず断念

Word Press SNS シェアボタン自作

3.「functions.php」ファイルの場合

  • 指定されたコードを子テーマのfanctions.phpの「?>」の前までの適当な場所に挿入→保存
     ┗ 「fanctions.php」更新の際は必ず事前に原本データをダウンロードの上、保存後はすぐに何事もないかチェック

Word Press SNS シェアボタン自作

4.「style.css」ファイルの場合

  • 指定されたCSSコードをコピペ
  • そのうち、PC分のCSSは今回既存のコードを活かすのでこの場合不要。というわけで「.share-pc」にかかるコードは全削除→保存

Word Press SNS シェアボタン自作

<結果>

できた
Word Press SNS シェアボタン自作

残課題

  • instagramとPocketのボタンも追加
  • もうちょっとサイズ小さめ(特にタテ)
  • 「images」フォルダにアップロードしたアイコンを子テーマに移動、content-extensions.phpのコード書き換え
  • できればPCとスマホ、同じコードに統一してすっきりさせたい

いつか・・・きっと・・・そのうち・・・スキルアップして改善します

今後の注意点

テーマの更新のたびに親テーマいじったところは手直す必要があり

以上でございます
今回も勉強になりました。賢人の記事に感謝
ご清聴、ありがとうございました







About tabinomori 350 Articles

地球のふしぎ、世界の絶景をご紹介!旅に役立つお得な情報もお届け!
I’ll let you know a variety of mystery world and breathtaking views in the world ! I tell you the tips of traveling!