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

(更新日2017/11/28)
(作成日2017/11/26)

【修正しました】
使用するファイルで、「style.css」は子テーマをコピーと書きましたが、“親テーマ”の間違いでした。
子テーマではスタイル変更できませんでした。解説部分を修正しています(2017/11/28付)。

—————————-

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

今回はフッターにSNSテキストリンク用のウィジェットを自作で追加する作業

試行錯誤の結果、
理想的な場所に設置はできなかったものの
妥協点を見出したのでその備忘録

Word Press Footer  SNS Link Buttons 作

本日のお題

  • Word Pressテーマ「Travelify」の固定ページのページ末尾にSNSリンクを張る
  • SNSリンクは各SNSの自分のページに飛ばす

使用するWord Pressテーマ

Travelify

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

【子テーマ】
  • 1.「index.php」
     ┗ SNSリンクをTOP画面へ表示させる場所
  • 2.「page.php」
     ┗ SNSリンクを固定ページへ表示させる場所
  • 3.「functions.php」
     ┗ メニュー追加
  • 【ファイルの所在】

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

【親テーマ】
  • 4.「style.css」
     ┗ ボタンの体裁を整えるコード

    【ファイルの所在】

    ドメイン/wp-content/themes/travelify/style.css

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

基本的にこちらの通り、ただテーマの構造上、フッターではなく別のページに応用

設定ポイント

<前提条件>
  1. テーマに標準で入っている「ソーシャルリンクメニュー」を流用
  2. SNS-iconsのstyleCSSを流用
  3. テーマの構造上、footer.php、footer-extensions.phpが使用できない
  4. 代わりに、SNSボタンが非表示の固定ページ末尾(TOP含む)へ挿入

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

1.「index.php」ファイルの場合

→TOP画面に表示

  1. ★子テーマのフォルダに親テーマの「index.php」をまるごとコピペしておく
  2. 「<?php get_footer(); ?>」の前に指定されたコード 「<?php wp_nav_menu( array ( ‘theme_location’ => ‘footer-menu’ ) ); ?>」を挿入
  3. CSSで体裁整えたいので<div class=”social-icons02″>~</div>で囲む→保存
  4. 「social-icons02」の定義は後述「4.」のCSSで定義

Word Press Footer  SNS Link Buttons 作

2.「page.php」ファイルの場合

→固定ページ(ABOUT MEなど)に表示

  • 「1.」の手順と同じ

Word Press Footer  SNS Link Buttons 作

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

  1. 指定されたコードを子テーマの「fanctions.php」の適当な位置にコピペ
     ┗ 「register_nav_menu( ‘footer-menu’,__( ‘Footer Menu’, ‘travelify’ ) );」は親テーマの「fanctions.php」からコピペ
    ※※※「register_nav_menu( ‘PHPのコード名’,__( ‘ウィジェットに表示されるメニュー名’, ‘テーマ名’ ) );」の構造
  2. fanctions.phpを保存したら外観>メニュー>位置タブに「Footer Menu」が表示されているか確認
  3. Footer Menuに標準で装備されている「ソーシャルリンクメニュー」を連結→保存
Word Press Footer  SNS Link Buttons 作
fanctions.phpをコード挿入後保存したら管理画面へ戻る

Word Press Footer  SNS Link Buttons 作
外観>メニュー>「位置の管理」に表示されているか確認

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

  1. 親テーマの「style.css」内、「.social-icons」の範囲をまるまるコピー→直下にペーストしコードを「.social-icons02」に変更
  2.  ┗ ※「.social-icons」はヘッダーのSNSアイコンの書式なので、今回とは切り離すために便宜上「.social-icons02」とする

  3. Facebook、Twitter、instagram以外のSNS用CSSコードは削除
  4. フォントサイズなど適宜変更→保存
Word Press Footer SNS Link Buttons 作
「.social-icons」の書式と切り離すため「.social-icons02」として再定義

Word Press Footer  SNS Link Buttons 作
親テーマの「.social-icons」はヘッダー内のSNSリンクアイコンの書式

5.各SNSにリンクを張る

  1. Facebook、Twitter、instagramは自分のページURLを入力、メールはHP用アドレスを入力
  2. テキストリンクの前に「Font Awesome」でそれぞれのアイコンコードをコピー→テキストの前にペースト→保存
Word Press Footer  SNS Link Buttons 作
Webフォントのアイコンを入れるとオシャレに見える

<結果>

妥協案、なんとかできた

Word Press Footer  SNS Link Buttons 作
トップページ

Word Press Footer  SNS Link Buttons 作
ABOUT ME ページ

今後の残課題

  • 本来はフッター内にウィジェットを追加したい
  • SNSリンクは自ページへのリンクではなくシェアリンクにしたい
  • SNSのCSSをすっきりさせたい

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







About tabinomori 347 Articles

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