Sponsor Link

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

20160211-simplicity2-customize-image

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

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

image1

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

image2

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

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

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

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

followbutton_migration_top

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

Sponsor Link

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

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

  1. 親テーマのheader.php。子テーマに複製し、【Simplicity child2 (header.php)】を編集。
  2. 親テーマの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>

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

image3

header.phpの下の方、59行目~63行目に位置しています。
この5行を表示させたい場所であるサイドバー (sidebar.php)に移動させます
(この記述を切り取りTeraPad等のテキストエディタに貼り付けておきます)

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

Simplicityの親テーマにあるサイドバーのテンプレート sidebar.php
header.phpの複製作業と同じ要領で、子テーマに複製(コピー)します。

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

テーマの編集から、子テーマのsidebar.phpを開いたら、上から4行目に、
<?php get_template_part(‘ad-sidebar’);//サイドバートップ広告の呼び出し ?>と記述があります。

image4

直ぐ下のスペースに(若しくは改行しても。)先程切り取った、
<div class=”alignright top-sns-follows”>~(省略)を貼り付けます。

以下の画像が、移動完了のキャプチャーです。

image5

これで、DEMOサイトの様に、サイドバーにフォローボタンが表示される様になります。

完成形のデモサイト⇓⇓⇓
DEMOSITEをみてみる

DEMOサイトでは、サイト名にセンタリングを施していますが、
サイト名が当サイトの様に、左寄せだと、フォローボタンが無い状態だと、少し寂しい感じがします。

そうした場合、空いたスペースに検索バーを表示したり、
バナー広告を入れたり等してみても良いと思います。

ご閲覧ありがとうございます。お粗末でした😑

ヘッダー廻りのカスタマイズ関連記事

サイトタイトルを中心にしフォローボタンを表示し文字サイズも変更—Simplicity2をカスタマイズ中
Simplicity2をカスタマイズ中。 サイトタイトルを中心にしてフォローボタンを表示。 サイトタイトルの文字サイズも変更。 サイトタイトル文字サイズ指***
グローバルナビメニューの位置をスクロールでヘッダー最上部に固定—Simplicity2をカスタマイズ中—
グローバルナビメニューの位置を スクロールでヘッダー最上部に固定する方法    —Simplicity2をカスタマイズ中— jQuery必要なしで簡単に。 ***