【Word Press】テーマ「Travelify」のカスタマイズ~SNSシェア自作ボタン追加編

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

今回は、FacebookやTwitterなどのSNSのシェアボタンを
″自作”かつ″投稿ページの中に追加”がテーマ

Word Press SNS シェアボタン自作
親サイト(旅の杜)では自作したSNSシェアボタンを装備
<参考にさせていただいた賢人の記事はこちら>

親サイトでうまく行ったので、上記参考記事を忠実に守り
作業を行ったところ
以下のようにSNSに係る部分が崩れてしまう
おそらく元々のスタイルシートにあるSNSのコードが影響してる模様

<問題発生の様子>
Word Press SNS シェアボタン自作
左上のSNSアイコンの色が変、ページ内のボタンのテキストの色が変など

試行錯誤の末、結局こちらのやり方はいったん外し
別のやり方で解決した流れです

本日のお題

  • Word Pressテーマ「Travelify」の投稿ページに自作SNSシェアボタン追加
  • ボタンはFacebook、Twitter、Instagram、LINE、Pocketの5つ

使用するWord Pressテーマ

Travelify

<はじめてのインストールの参考記事はこちら>

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

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

    【ファイルの所在】

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

【子テーマ】
  • 2.「style.css」
     ┗ SNSシェアボタンの色や形など見た目を整える作業
  • 3.「shared-button.php」※新規作成
     ┗ SNSシェアボタンのポップアップ表示などの動作をプラグラムする作業

    【ファイルの所在】

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

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

大変丁寧で分かりやすい

設定ポイント

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

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

  • 282行目「</div><!– .entry-meta — >」の後283行目の「</div>」と次の行「 <?php do_action( ‘travelify_after_post_meta’ ); ? >」の間に指定された「<?php include( STYLESHEETPATH . ‘/shared-button.php’ ); ? >」を挿入→保存

Word Press SNS シェアボタン自作

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

  • 指定されたCSSコードを適当な場所に挿入→保存

Word Press SNS シェアボタン自作

3.「shared-button.php」ファイルの場合

  • 子テーマ内に指定されたファイル名でPHPファイル新規作成、指定されたCSSコードコピペ
  • 今回は不要なGoogle+、はてなブックマークは削除
  • サンプルにないinstagramとLINEを追加
  • instagramとLINEのアイコン素材は「Font Awesome」でコードコピペ
    念のため
    ・Facebook:fa fa-facebook
    ・Twitter:fa fa-twitter
    ・LINE:fa fa-comment ※LINEアイコンがないので「comment」で代用
    ・instagram:fa fa-instagram
    ・Pocket:fa fa-get-pocket
  • instagramとLINEのリンク先「href=”” ~」は親サイトから代用
    念のため
    Facebook:http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title(“”,””,0)); ?>”
    Twitter:http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title(“”,””,0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=
  • サンプルではアイコンだけなので横にテキスト文字も表示

Word Press SNS シェアボタン自作

■おまけ
コードが正しく入力されているのにもかかわらず
うまく表示されないときは
ブラウザのキャッシュを消すと表示されることあり

<結果>

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

今後の注意点

テーマの更新のたびに上記を手直す必要があります
面倒です
何故子テーマが反応しないのか疑問ですが、わたしの知識ではここまでです

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







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!