LION MEDIAのシェアボタンデザインはカスタマイズ可能!?こだわり実践編

LION MEDIAのシェアボタンデザインはカスタマイズ可能!?こだわり実践編

本ブログに使用しているライオンメディアというテーマには、SNSへのシェアボタンを設置する機能がありますが、デザインの編集機能はありません。

今回は、テーマの内容をカスタマイズすることで、オリジナルデザインのシェアボタンを設置する方法について、紹介します。

他のテーマを使用している場合でも、同じような考え方でカスタマイズが可能ですので、参考にしてみてください。

 

カスタマイズの準備

まず、カスタマイズするテーマの準備をします。

使用しているテーマにもよりますが、多くのテーマには親テーマと子テーマという概念があり、カスタマイズが限定された状態になっています。

親テーマとは、開発者が更新することで最新の状態にアップデートされる、テーマを構成する本体データになります。

当然、カスタイマイズによって編集は可能ですが、アップデートの際に最新データと差し替えが実施されるため、カスタマイズ内容はリセットされていまいます。

子テーマとは、親テーマをカスタマイズするために作成するデータとなります。

作成するとはいえ、その作業は親データから必要なデータファイルをコピーするだけです。

例外もありますが、親テーマの各データのうち、同じ名前のデータを子テーマにコピーすることで、子テーマのデータが優先して読み込まれます。

その結果、子テーマでのカスタマイズ内容が反映され、親テーマが更新されてもカスタマイズ内容はリセットされなくなります。

 

FTPソフトのインストール

さて、前置きが長くなりましたが、上記をふまえて、親テーマから子テーマへ該当データのコピーが必要ということは理解してもらえたでしょうか。

ここで必要になるのが、FTPソフトと呼ばれるファイル転送ソフトです。

初めての場合には設定に少し時間がかかりますが、カスタイマイズの際には不可欠なソフトになりますので、今後のためにも導入しておくことをおすすめします。

FTPソフトに関する、無料ソフトの比較、インストール方法、使い方の説明は下記のサイトで分かりやすく説明されていましたので、本記事での説明は省略させていただきます。

 

該当データのコピー

FTPソフトの準備ができましたら、ライオンメディアの親テーマのフォルダにアクセスし、【single.php】というデータを子テーマにコピーします。

なお、親テーマ(lionmedia)および、子テーマ(lionmedia-child)は、下記の階層フォルダに格納されています。

ドメイン名/public_html/wp-content/themes/

子テーマには、初めから【function.php】および、【style.css】というデータが存在しますが、これらはそのままで構いません。

 

シェアボタン本体の設定

カスタマイズの準備ができましたら、次にSNSへのシェアボタンの準備を行います。

ライオンメディアには、ウィジェット機能において任意のHTMLを追加できる機能があらかじめ搭載されていますが、ここで追加できるのは、あくまでHTMLコードとなっており、PHPは使用できません。

シェアボタンを設置するためには、当該記事のURLを自動的に定義するため、PHPによる関数定義を行う必要があり、本機能は使えません。

今回は、作業内容を簡略化し、定義ミスによる誤動作をなくすため、ライオンメディアで定義している内容をコピーし、定義名をカスタマイズします。

 

シェアボタンに関する定義内容のコピー

 

 

上記のとおり、【外観】→【テーマの編集】と選択し、ライオンメディアの親テーマを選択します。

右側に親テーマに格納されているデータリストが表示されますので、【function.php】を選択します。

メイン画面にデータ内容が表示されますので、約5,180行目にある下記の定義内容をまるまるコピーします。

 

◆ function.php 約5,180行目

 

上記がSNSへのシェアボタン本体を定義している内容になりますので、カスタマイズするために子テーマの【function.php】にコピーします。

右側の選択を親テーマ(lionmedia)から、子テーマ(lionmedia-child)に変更し、格納されているデータリストから、【function.php】を選択します。

メイン画面にデータ内容が表示されますが、初期状態では20行程度の記載しかありません。

下記ユーザーカスタマイズエリアと記載されているはずですので、それより下にコピーした内容を貼り付ければシェアボタン本体のコピーは完了です。

シェアボタンの種類を変更する場合は、上記のコードについて編集を行ってください。

 

定義名のカスタマイズ

シェアボタン本体のコピーが完了したら、次に、定義名のカスタマイズを行います。

カスタマイズ箇所は、上記のコード内容のうち、着色している4行目になります。

定義名のカスタマイズは必須ではありませんが、親テーマの定義内容と区別する意味がありますので、個人的におすすめします。

 

◆ カスタマイズ前

 

◆ カスタマイズ後(例:_originalを末尾に追加)

 

シェアボタンデザインの設定

SNSへのシェアボタン本体の準備ができましたら、シェアボタンのデザインについて設定します。

新たに定義する内容であれば、子テーマに格納されている、【style.css】に記述することになりますが、ライオンメディアの場合は違う方法で設定を行います。

 

追加CSS機能の活用

ライオンメディアには、追加CSSという設定機能があります。

理由は後述しますが、今回は、本機能を使用してシェアボタンデザインの設定を行います。

 

 

上記のとおり、【外観】→【カスタマイズ】と選択し、一番下にある、【追加CSS】を選択します。

追加するCSSについて記述する画面が表示されますので、シェアボタンについてのデザイン内容を記述します。

下記は、例として本ブログに設置しているシェアボタンのデザイン内容になりますので、デザイン内容については好みに合わせて編集してください。

 

◆ 追加CSSに記述する内容

 

追加CSSに記述する理由

子テーマには初めから【function.php】および、【style.css】というデータが格納されているという話をしました。

この2つは、他の格納データと比較して特殊なデータとなっています。

他の格納データ(例えば、single.phpのようなデータ)は、子テーマのデータ内容が、親テーマのデータ内容に上書きされます。

そのため、子テーマに格納するデータ内容には、カスタマイズに関係のない内容も全て記述されている必要があります。

これに対して、この2つは、親テーマのデータ内容に追加する内容だけが、子テーマのデータ内容に記述されるため、上書きにはなっていません。

また、function.phpは、親テーマのデータ内容を参照した後、子テーマを参照するため、子テーマの内容が追加されるだけではなく、重複する内容は上書き(後に参照した方が優先)されます。

一方、style.cssは、参照する順序が逆になっているため、子テーマの内容が追加されるだけで、重複する内容は親テーマの内容が適用されます。

これを回避するため、今回は追加CSSという、親テーマに組み込まれている機能を利用することにしました。

他のテーマの場合や、定義する内容が重複していない場合は、子テーマをカスタマイズすることで上手くいくはずですので、お試しください。

 

まとめ

今回は、私が試行錯誤した経験を参考に、ライオンメディアにおけるカスタム方法についてご紹介しました。

同じテーマを利用されている方も、そうではない方も、考え方の参考になれば幸いです。

ではでは。

 

BACK TO TOP