WordPress 軽量のソーシャルボタンを自作し、任意の場所に表示する

WordPress Twenty Sixteen カスタマイズ
SNSボタンをまとめたショートコードを作成し、
任意の場所に表示
 
①.「PageSpeed Insights」で測定すると、【 Poor 】と遅い。
②.「WP Social Bookmarking Light」プラグインを使用しているが、表示位置が自由にならない。
 
軽量のソーシャルボタンを自作

という理由で、最も軽いソーシャルボタンをPHPファイルで作成し、SNSボタンを投稿ページや固定ページの任意の場所に、PHPファイルを動かす 『ショートコード』 で表示できるようにした。

 
以下、ソーシャルボタンをPHPで作成し、そのPHPファイルをショートコードにする方法を纏めた。
 

スポンサー リンク

 

 目 次

  • 1. ソーシャルボタンの作成要領
    • ※ Webフォントを使用し、シェア画面をポップアップ表示
  • 2. ショートコードの作り方
    • ※ 幾つもの『ショートコード』を自由に自作できるようにする
 
 
1. ソーシャルボタンの作成要領
 

できるだけページの表示速度を早くすると共に、「PageSpeed Insights」でjavascriptの圧縮やキャッシュ時間を長くしろと注意されないように・・・したい。

ソーシャルボタンは、ボタン1つ1つにscriptタグ、画像、iframe等が含まれており、これらを読み込む必要がある。複数のボタンを設置すると、同じように1つ1つのscript、画像等を読み込むことになり、ボタンの数が多い程読み込みには時間がかかる。そこで、ボタンの画像を使わずにボタン自体をCSSで作成し、且つ、アイコンにはウェブフォントを使う事で軽量化する。
 
 
①.Webフォントを用意する。
 

ウェブサービスアイコンフォントのダウンロードサイトから「Webフォント」をダウンロードして解凍する。「icomoon」フォルダができるので、テーマ直下にコピーする。

軽量のソーシャルボタンを自作

「icomoon」フォルダをそのまま使っても良いが、この中のCSSファイルを読込ませないために、「icomoon」フォルダ内にある「fonts」フォルダをテーマのCSSファイルが置かれているフォルダに移動し、「icomoon」フォルダ内にある「style.css」の中身を自分のCSSファイルに追加する。
 
 
②.「style.css」にソーシャルボタン用のスタイルシートを追記する。
 
子テーマの style.css に追記。

 
 
③.ソーシャルボタン用のphpファイルを作る。
 
このファイルは、後述の『shortcode』ディレクトリに保存する。
ここでは【 short-sns.php 】という名前にした。

 
※:参考にさせて頂いたサイト。
 
 
2. ショートコードの作り方
 

ショートコードの作り方
上図のように、
①.『shortcode』ディレクトリを作りその中にPHPプログラムを入れる。
②.『functions.php』にショートコードを使ってphpファイルを呼び出す処理を追記する。
③.記事や固定ページに『ショートコード』を埋め込む。

これで、幾つもの『ショートコード』を自由に自作できるようになる。
 
 
① functions.phpに以下のコードを追記する。
 

子テーマを使用している場合。

親テーマを使用している場合。

 
 
② shortcodeディレクトリを作成する。
 
子テーマを使用している場合。
/ wp-content/ themes/ twentyseventeen-child/shortcode
子テーマを使用している場合。
/ wp-content/ themes/ twentyseventeen/shortcode
 
ショートコードの作り方
 
③ショートコードの書き方
 
 file=‘xxx’ の xxx にphpのファイル名を入れる。
 
 
 
これで、ソーシャルボタンを任意の場所に、自由に設置できるようになった。
 
 

ソーシャルボタンを任意の場所に、自由に設置

 
参考:
 

以上。
(2017.11.02)

 

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください