Stinger3に細かなカスタマイズを加えたので備忘録。

2016/08/22カスタマイズ, WordPress

どうも、リョウ(@ryskyshd)です。

久しぶりにWordPressのテーマファイルをいじってみました。
前々から気になっていたほんとに細かな点でのカスタマイズです。
いくつかやってみましたのでまとめてどうぞ。

使用しているテーマStinger3とは

今さら解説は必要ないとは思いますが、Stinger3とは@ENJILOGさんが提供されている無料のWordPressテーマです。

STINGER3は、初心者の方でも簡単にSEO対策やアフィリエイトを考えたブログを始められる無料テーマです。必要な機能は最初から揃っていますので簡単かつ効果的なブログを運営する事ができます。

導入・運営・カスタマイズはほんとに簡単にできますので、WordPress初心者の方には一度使ってみることをお勧めします。

今は新バージョンのStinger5もあります。

個別記事下のアドセンスを2つ横並びに表示する

まずは、個別記事の下の方に設置してあるGoogle AdSenseを横並びに2つ表示するカスタマイズです。
参考にしたのは以下の記事。

全く記事の通りにやっていただければ成功します。
ただ、公開されているソースがやや間違っていたのでちょっとだけご注意ください。
具体的には「記事下にダブルレクタングルを設置」の見出しから始まる箇所のHTMLソースの中で、divの閉じタグが漏れてました。
その他のソースはそのまま使えると思います。

単純に面倒くさかったのでやってなかったんですが、当然ひとつよりふたつの方がAdSense効果は高いはずですね。
あ、上のカスタマイズで記事部分の表示幅を大きくしているので、トップページにもひと手間加えないとサムネイルと記事タイトルとかの部分が離れすぎてしまいますよ。

SNSボタンにPocketを追加

記事の下の方に各SNSに追加するボタンがありますが、デフォルトではTwitter、Facebook、Google+、はてなブックマークの4つしかありません。
ここにPocketに追加するボタンを追加します。
これは超簡単です。

1.ボタンのコードを取得します。

上記Pocket for Publishers: Pocket Buttonのページより貼り付けたいボタンデザインを選択してコードをコピります。

2.貼り付けたい箇所にペースト

WordPressの管理画面より、「外観」→「テーマの編集」→「sns.php」と進み、はてなブックマークボタンの次にリストタグで囲って先ほどコピーしたコードを貼り付け。
これでオッケーです。

はてなブックマークのボタンを変更

先ほどのPocketボタンの追加のついでに、はてなブックマークボタンも変更しましょう。
従来の古いデザインのものよりも、現在のちょっとだけシャレたボタンに変えます。

1.ボタンのコードを取得します。

上記サイトより貼付け用のコードを取得するんですが、いくつか注意点があります。

hatena1
▲他のボタンとデザインを合わせるため、「表示(バーティカル)」を選択します。

hatena2
▲「ページのアドレス」、「ページのタイトル」の欄に任意の文字を入力します。
WordPressの個別記事に貼り付けたいので、コードを取得した後に「ページのアドレス」欄の「テスト」を「php the_permalink()」に、「ページのタイトル」欄の「テスト」を「php the_title()」に書き換えます。
ていうかこれ書いてて思ったんですが、「ページのアドレス」欄に「ページのアドレス」、「ページのタイトル」欄に「ページのタイトル」って入れた方が分かりやすいと思いますw

詳しくは以下の記事を参照してください。

うまくいけば以下のように表示されると思います。
sns-button
▲見た目のデザインが統一されて気持ちいいですね。

WordPressプラグインAmazonJSを導入

導入は多少ややこしいけど、このプラグインはメッチャ便利ですよ!
とにかく以下の記事通りに設定してみてください。

少し前の記事なので途中の画面が多少違いますけど、要するに「アクセスキーID」と「秘密のアクセスキー」を取得すればいいのでそこは何とか頑張りましょう。

無事に設定できれば上記のような綺麗なレイアウトでAmazonへの商品リンクが表示されます。
これまではカエレバを利用していましたが、個人的にはAmazonへのリンクだけでも表示できれば問題ないのでこっちのほうが断然楽ですね。

※現在は使ってません。

最後に

いかがでしたでしょうか。
いくつかまとめて投稿しましたが、特に最後のAmazonJSプラグインは秀逸ですね。
検索して記事に貼り付けるのも超絶簡単で、もっと早く知りたかったです。
ただ難点は設定が面倒なこと。
でもこれさえクリアすればハッピーブログライフが待ち構えていますのでぜひどうぞ。

スポンサーリンク

Stinger3

Posted by リョウ