WordPressテーマを編集してSNSの関連付けをしたい

WordPressのテーマはたくさんのファイルで構成されています。

機能面や表示面の大半を司る「○○.php」やテキストの色や大きさを変更できる「○○.css」、それから「上へ戻る」など、ブログに動きを与える「○○.js(JavaScript)」などなど。

通常、これらのファイルを修正するための専門的な制作スキルが無くても、WordPressでブログを運営することは可能です。

ただし、どんなテーマでもそうですが、カスタマイザーなどで設定する場所がない限り、「SNS」の設定だけは、テーマファイルを直に編集する必要があります。

そんなわけで、今回はStinger5-Cheetahにおいて、SNSの設定を追加するための方法を順番に見てみたいと思います。

テーマをカスタマイズするための子テーマの導入について

ちなみに、今回の記事はStinger5-Cheetahの『子テーマ』が導入されているという前提で書かれています。

まだ導入していない場合は下記の記事を参考に導入することをおすすめします。

 

まずは必要なファイルを親テーマから子テーマへコピーしよう

カスタマイズがうまく行かず、あれこれ触っているうちに戻らなくなった!なんてことを避けるために、当ブログでは「子テーマ」の導入をおすすめしています。

ですのでまずは、必要なファイルを親テーマのフォルダ(stinger5-cheetah)から子テーマのフォルダー(stinger5-cheetah-child)へコピーしましょう。

それぞれのフォルダは「WordPressをインストールしたフォルダ/wp-content/themes/」の中にあります。

 

必要なファイルは以下の3点です。

  • header.php
  • sns.php
  • sns2.php

「FTP」と言われて分かる方は「FFFTP」などのFTPクライアントを利用して、該当のファイルを移動しましょう。

 

「FTP?なんじゃそれ??( ゚д゚)ポカーン」という人は、お使いのレンタルサーバーによって、サーバー内のファイルをコピーするためのサービスが準備されていることが多いので、「ファイルマネージャー」とか「レンタルサーバー名 FTP」とかで調べてみましょう。

 

参考までに、「エックスサーバー」「ロリポップ!」「さくらインターネット」の3つについては、サーバーの管理画面のキャプチャを載せておきます。

 

エックスサーバー

ログイン後すぐの画面で、『ファイルマネージャ』をクリック

sns-settings-01

 

ロリポップ!

ログイン後、左ナビのWEBツールにカーソルを合わせたときに表示される『ロリポップ!FTP』をクリック

sns-settings-02

 

さくらインターネット

ログイン後、左ナビの下の方の運用に便利なツール欄の『ファイルマネージャー』をクリック

sns-settings-03

 

Sponsored link

テーマファイルの変更方法について

3つのテーマファイルがコピーできたら準備は完了です。いよいよWordPressの管理画面から、該当の箇所の修正を行いましょう。

 

まずは具体的な編集方法からご紹介します。WordPressにログインしたら「外観」→「テーマ編集」の順番にクリック

テーマ編集

 

ページの右側に先ほどコピーしたファイルが表示されているはずなので、編集したいものをクリックしてください

(下記の画像ではheader.phpを選択)

header.phpを選択

 

必要な編集が完了したら、一番下までスクロールして「ファイルを更新」をクリックすれば完了です。

ファイルを更新

 

Sponsored link

header.phpはの変更箇所は3つ

それでは、3つのファイルの変更箇所について見ていきましょう。

まずは、ブログのすべてのページで見ることになるヘッダー部分の設定です。

sns-settings-07

123行目以下の <!– ヘッダーにSNSボタン –> となっているところが変更箇所です。

【ツイッターのURL】

→自身のTwitterのマイページのURLです。(僕の場合:https://twitter.com/tsunji1983

【フェイスブックページのURL】

→Facebookページがあれば入力しましょう(僕の場合:https://www.facebook.com/komaroku.note

【Google+ページのURL】

→Google+のマイページのURLです。(僕の場合:https://plus.google.com/108082856903953563974

 

もし FacebookやGoogle+をやっていない という場合は、該当のSNSについて<li>~</li>までの1行を削除してください。

 

sns2.phpの変更箇所は2つ

sns2.phpは各記事のアイキャッチ画像のすぐ下の4つのSNSボタンの設定が記載されています。

sns-settings-08

該当のテーマファイルのうち、13行目と39行目にある↓の部分が変更箇所です。

【●ツイッターアカウント名(@なし)●】

→ご自身のTwitterのIDのうち@以外を入力してください(僕の場合IDが@tsunji1983なので入力するのは「tsunji1983」)

 

sns.phpの変更箇所は4つ

sns.phpは記事の一番下の8つのSNSのボタンの設定が記載されています。

sns-settings-09

該当のテーマファイルのうち、15行目と59行目にある↓の部分は、sns2.phpと同様にTwitterのIDの@以外の部分を入力しましょう。

 

続けて、49行目と92行目にある↓の部分を変更することで、クリックするとすぐにFeedlyというRSSリーダーに登録できるようになります。

【●ドメイン名(例:shufulife.com)●】

→「http://」や「www」などをつけずに、ご自身のブログのドメインのみを入力しましょう。(僕の場合:komaroku.com)

 

Stinger5-CheetahのSNSの設定まとめ

3つのファイルの計9ヶ所の内容を書き換えることで、Stinger5-CheetahのSNS設定は完了です。

これで Stinger5-Cheetah カスタマイズ速習の初級編の第05回目までが終了しました。今回までで、ブログを公開するうえでの必要最低限のカスタマイズは終了になります。

 

目次を見ていただいたことのある方は「じゃあ第06回と第07回は何?」と思うでしょう。実は、GoogleのPageSpeed InsightでStinger5-Cheetahをチェックすると、2点、HTMLの改善点をおすすめされます。

なので、今後の2回については、改善点を修正しつつ、将来的に自分でもっとカスタマイズしてみたい!と思った時のために「CSSの編集」と「テーマファイルの編集」について練習してみようと思います。

 

書いている内容で分かりにくいところや、もっと知りたいところなどあれば、お気軽にお問い合わせやTwitterへご連絡ください。

以上、TSUNJI(@tsunji1983)でした。

 

Sponsored link