トップ(ヘッダー)のフォローボタンの位置替え!フォローボタンをサイドバーに移動—Simplicity2カスタマイズ中—

このサイトではなく、現在構築中の映画情報サイトの方のカスタマイズ録をメモ記事にしています。

ヘッダー部分に表示されるフォローボタン。

Simplicityで、これを表示したければ、カスタマイザーの「SNS」の項目で簡単設定できます。

このシェアボタンをサイドバーに移動させる方法です。

前回の続きとなるのですが、グローバルナビメニューの位置をスクロールでヘッダー最上部に固定した為、
グローバルナビメニューでフォローボタンを隠してしまうので、
シェアボタンの表示を移動する事にしました。

完成形はこんな感じです。⇓⇓⇓
DEMOSITEをみてみる

ボタンのリンク先はDEMOサイトです。サイドバーにフォローボタンが表示されていると思います。

この表示方法について記していきます。

このページのメニュ

フォローボタンをサイドバーに移動する方法

フォローボタンをサイドバーに移動する方法

📋 この作業に必要なファイル

親テーマのheader.php。子テーマに複製し、【Simplicity child2 (header.php)】を編集。
親テーマのsidebar.php。子テーマに複製し、【Simplicity child2 (sidebar.php)】を編集。

親テーマのheader.phpを複製する。

Simplicityの親テーマにあるheader.phpを子テーマに複製(コピー)して下さい。
子テーマへheader.phpの入れ方は、前記事のこの辺りをご閲覧下さい。

ロリポップユーザーの方でも、ロリポップFTPで簡単にできます。

子テーマに入れたファイルを、子テーマ内で変更する。という事になります。
親テーマのファイルを書き換えずにカスタマイズする事になりますので、
親テーマがバージョンアップしても、変更したファイルを書き換える必要がなくなります。

詳しい基本的な事は、子テーマに無いファイルを親テーマから複製する。に記しています。

Simplicity2の子テーマのheader.phpを編集する

テーマの編集から、子テーマのheader.phpを開いたら、以下の4行の記述を探して下さい。

トップ(ヘッター)のフォローボタン表示部分である、以下を切り取ります。

             　 <div class="alignright top-sns-follows">
                <?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
                <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
                <?php endif; ?>
              </div>

「トップのフォローボタンを表示するか」という文言をブラウザーの検索窓でサーチすると良いでしょう。