ＳＮＳボタンのカスタマイズ

賢威７のSNSボタンを大きくカスタマイズする方法を、備忘記録を兼ねて記事にしました。
当記事は、カスタマイズ方法が掲載されているサイトの記事を使い、追加でさらに独自にカスタマイズして、記事下部分だけ大きく表示する方法をご紹介しております。

賢威７に標準搭載のＳＮＳボタンは小さい！

賢威７で標準搭載されているＳＮＳボタンがこちらです。

賢威のＳＮＳボタン

小さくて目立たないですよね！

大きなＳＮＳボタンに変更するには、プラグインを入れるしかないんだろうと思い込んでいて、色々探したのですが、いくら探しても見つからない。

見つかるはずがなかったんですよね～。
だって、テーマのコードやＣＳＳを直接書き換えて実現されていたんですから．．．。

大きなＳＮＳボタンはここにあった！

導入したいなーと思って探していた、大きなＳＮＳボタンがこちら。

SNSボタン

見栄えが全然違いますよね～。

掲載されていたサイトは、keijiさんが作成されていたこちらのサイト。

＞＞＞　賢威７のSNSボタン（ソーシャルボタン）をカスタマイズする方法

記事の通り導入してみると、記事内の上下にあったＳＮＳボタンがサクッと大きなSNSボタンに入れ替われました！！

パチパチパチ・・・！！！

ＦＴＰを使って直接入れ替えたら、数分あれば出来る作業内容でした。

 

でもでも．．．。
私が使いたかったのは、記事下だけ！

記事の上まで大きくなっては、目障りに感じたんですよね。
そこで、記事下だけに大きなＳＮＳボタンを導入する方法をご紹介します。

つまり、当サイトのＳＮＳボタン状態です。

大きなＳＮＳボタンを導入する前に

ここからは、賢威７．１のテンプレートに関して解説します。

賢威7.1のファイル構造から解説

賢威７の投稿を制御しているファイルは、single.php です。

single.php 内より、ソーシャルボタンが記述されている social-button2.php を呼び出して、上下に表示させています。

具体的には、single.php の３８行目と６３行目の次のコードです。

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

掲載サイトの要点をザックリと

賢威７のSNSボタン（ソーシャルボタン）をカスタマイズする方法 に記載されている内容の要点は、

  1.  賢威７で投稿ページにSNSボタンが表示されるようにする
  2. social-button2.php の内容を消して、上記サイト内のコードに書き換える
  3. Simple Custom CSSに、上記サイト内のＣＳＳコードを入力

という内容でした。

Simple Custom CSS というプラグインを用いる方法で紹介されていましたが、無駄にプラグインを増やしたくないので、私は子テーマのＣＳＳファイルに直接書き込みました。
その方法を次にご紹介します。

記事下だけに大きなＳＮＳボタンを設置する方法

当記事は、子テーマを使う事を前提に解説しております。
子テーマの準備が出来ていない方は、こちらの記事 WordPress子テーマの作り方 を参考に設置してみると良いでしょう。

子テーマの single.php を改造

元のテーマから子テーマにコピーした single.php を改造します。
改造と言っても、コード内部のファイル名を書き換えるだけです。

記事下のＳＮＳボタンのみ変更したいので、場所は６３行目の次のコードのファイル名を変更します。

social-button2 というファイル名を、social-button3 にします。

変更前
<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

変更後
<?php if (the_keni('social_post_view') == "y") get_template_part('social-button3'); ?>

子テーマに social-button3.php を用意

賢威７のSNSボタン（ソーシャルボタン）をカスタマイズする方法 に記載されている、「social-button2.php内にソースを貼り付ける」の部分のコードを、新たに作成した social-button3.php にコピペする。

子テーマの base.css にＣＳＳを追記

賢威７のSNSボタン（ソーシャルボタン）をカスタマイズする方法 に記載されている、「Simple Custom CSSにコードを入力」の部分のＣＳＳを、子テーマに用意した base.css にコピペする。

ＦＴＰで転送

以上で作成した３つのファイル、

  • single.php
  • social-button3.php
  • base.css

これらを、ＦＴＰで子テーマのフォルダーへ転送すれば設置完了です！