SNSボタンのカスタマイズ

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

賢威7に標準搭載のSNSボタンは小さい!

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

賢威のSNSボタン

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

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

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

大きなSNSボタンはここにあった!

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

SNSボタン

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

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

>>> 賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法

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

パチパチパチ・・・!!!

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

という内容でした。

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

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

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

子テーマの single.php を改造

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

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

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 を用意

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

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

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

FTPで転送

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

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

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