Stinger3 – カスタマイズ備忘録〈その三〉 ~標準でSEOに強いWordPressテーマ(無料)~

公開日:  最終更新日:2014/04/08

LINEで送る
Pocket

stinger3-公式サイト

画像は公式サイトより

Stinger3がWordPress3.8に対応したのでアップデート。カスタマイズに挑戦中。備忘録として書いておきます。

前回のカスタマイズはコチラ。

Stinger3のカスタマイズでやったこと 【まとめ】
Stinger3のカスタマイズ – 追尾型SNSボックスを非表示にする&記事タイトル下にSNSボックスを設置する方法

【2014年3月12日追記】
上記記事はタイトルを変更しました。

ちなみに僕は全くの初心者なので色々な参考記事を読みながらテキトーにコードを弄っています。
Stingerのカスタマイズについてはコチラ(↓)の記事でリンクをまとめて下さっています。たらい回しにしているようで申し訳ないですが・・・

ここを見ておけば検索不要!Stingerカスタマイズ辞典

今回のカスタマイズはこんな感じです。

子テーマを作る

前回のカスタマイズにおける最大の過ちは「子テーマ」を作らなかったことだ。
元のテーマファイルからカスタマイズ用に複製したから、最悪標準状態には戻すことはできるけど。

子テーマの作り方はGoogleで「WordPress 子テーマ 作り方」なんかで検索すれば色々出てくるので、それらを参考に作ってみた。

元のStinger3のテーマファイル名が「stinger3ver20131217」だったので、子テーマの名前は「stinger3ver20131217-child-custom01」とした。
・・・custom01と付けたけど今のところ02の予定は無い。

子テーマを作るだけなら作業はカンタン。

親テーマと同じ階層に子テーマ用のフォルダを作り、その中に必要なファイルを入れる。

これだけ。

親テーマである「stinger3ver20131217」はサーバーの、

/wp-content/themes/

にあるので、子テーマのフォルダは、

/wp-content/themes/stinger3ver20131217-child-custom01

となります。

子テーマとして最低限必要なファイルはstyle.cssです。

これだけの内容で子テーマとなります。
Template:には親テーマの「フォルダ名」を指定、@import urlで親テーマの「ディレクトリ」を指定します。
ここまでで「基本親テーマの外観で、◯◯という名前の子テーマを作りましたよ」ってことです。

ここから自分がカスタマイズしたいファイルを編集・追記などをしてアップしていく作業になります。

Twitterのメンション設定

twitterで記事をツイートしたとき、記事タイトルの後に「@◯◯◯さんから」を付けるようにしました。
メリットとしては、お知らせが来るのでツイートに気づきやすくなることと、自分のtwitterアカウントの宣伝になるということです。
STINGERご利用の方にぜひ、やって頂きたい事。(公式サイト)を参考に。

やることはfooter.phpsns.phpにあるtwitter関連のコードの中に「data-via=”ここにTwitterアカウント”」という箇所があるので、そこに自分のtwittterアカウントを入れるだけです。こんな感じで。

Zenbackの導入&記事下のSNSボックスを記事タイトル下に移動

ブログを賑やかにするためにZenbackを導入してみた。
Zenback-トップページ
Zenbackの機能で各種SNSボックスの表示が可能なので、Stinger標準の記事下のSNSボックスを削除し、代わりにタイトル直下に表示させました。

弄るのはsingle.cssです。
元のテーマのものを子テーマにコピーして、それを編集しました。
コードは以下の通り。

50行目くらいにある<?php the_content(); ?>の直前に<?php get_template_part(‘sns’);?>を追記。
60行目くらいにある<div class="kizi02">の直前にZenbackで取得したコードを追記、直後にある<?php get_template_part(‘sns’);?>を削除。(上のコードではコメントアウトしています)

Zenbackについては導入したばかりでまだ効果は分かりません。

追尾型SNSボックスを縦表示にする

AddThis Smart Layersというプラグインを入れていたため前回は追尾型SNSボックスを非表示にしていましたが、WordPressを3.8にアップデートしたためなのか、Stinger3のバージョンを変更したためなのか、このプラグインによるシェアボタンが表示されなくなりました。(原因不明)

で、Stinger標準のものを使おうと思ったのですが、記事に被ってしまうのが邪魔に感じるので縦に表示するようにしました。
弄るのはsns02.phpです。

<ul class="snsb clearfix">以下に、<li> 各SNSのコード </li>で記述されているのですが、</li>の後に<br>を追加しただけです。一応コードはこんな感じ。

ホントは縦表示にした後ボックス内で中央配置にしたいのですが、やり方分からず・・・
多分style.cssを弄ればいいのだと思う。

ボックス全体の位置の調整はstyle.cssの中にある「.sns {」以下を編集します。
margin-left: 10px;bottom: 50px;と変更し、ちょい中央寄りにし、ちょい上に上げました。

ちなみに同じような機能のプラグインにShareBarというものもあります。使い方はコチラで詳しく解説されています(↓)
ソーシャルボタンSharebar(シェアバー)の使い方と設置方法。WordPressプラグイン。|IAO-@In_advance_only-

フッターの装飾&ウィジェット対応

参考サイトはコチラ。
おしゃれは足元から!Stinger3フッターカスタマイズで差をつけろ!#Stinger-WP

この記事ではウィジェットエリアとして「フッター左」と「フッター右」を追加しているのですが、ちょっと弄って「フッター中央」も追加しました。

弄るのはfunctions.phpfooter.php。詳しくは分かりませんが、functions.phpは子テーマ内に作るとエラーが出てブログが表示されません。
従ってこのファイルだけは元のテーマのものを編集しました。

まずはfunctions.php。「//ウイジェット追加」以下を編集します。コードを抜粋するとこんな感じ。

参考記事のコードに追加して「フッター中央(footer_c)」を追加しました。

次にfooter.phpでウィジェット領域を定義します。これは子テーマ内で作成。コードはこんな感じ。

最後に子テーマのstyle.cssで、配置やデザインを編集。以下を追記しました。

フッター背景に合わせて文字色を変更しました。

「フッター中央」ウィジェットは970×90のラージビッグバナーを想定しています。
Stinger標準でも十分広告は表示されているので、今のところ必要性は感じていませんが・・・

ここまでで ダッシュボード → 外観 → ウィジェット に「フッター中央・左・右」が追加されているはずです。
Stinger3-ダッシュボード-フッターウィジェット追加

スクロール広告ウィジェットにランダム記事を表示

ちょっとしたことですが、単に広告だけ表示するのはもったいないと思ったので。
基本的には追尾型の広告は邪魔に感じる方です・・・

ランダム記事の表示の仕方は前回同様。
予めExec-PHPなどでテキストウィジェットでPHPが使えるようにしておきます。
あとはウィジェットテキスト内でランダム記事表示関数を呼び出し、広告コードを書くだけです。

ここは広告以外のもっと別の使い方を模索した方がいいと個人的には感じます。

あとがき

今回のカスタマイズは以上となります。

記事冒頭にも書きましたが、あくまで素人がテキトーにコードを弄っているので、試してみたい方は自己責任でお願いしますm(_ _)m
それよりなにより自分がもっと勉強しなければならないのですが・・・

間違いなどありましたらご指摘いただけると幸いです。

LINEで送る
Pocket

サイト内検索

スポンサードリンク

これ書いてる人

こんな記事書いてますが本業は ラーメン屋 です。 詳細はコチラ



follow us in feedly

PAGE TOP ↑