WordPressのStingerを自由自在にカスタマイズするための８つの修行

Stinger Advent Calendar 2013、19日目担当のハマコー(@hamako9999)でございます。

秋田＠豊作さんのStinger3 に対して行ったカスタマイズのセルフまとめ #Stinger-WPから確かにバトン受け取りました！！

ところで、皆さん、「Stingerのここを、もっとこうで、こうしたいんや」と思った時どうしますか？ 「stinger カスタマイズ」とかで検索しますよね。もしくは、このAdventCalendarの記事を全部見返すかもしれない。

Stngerは人気があるだけに、カスタマイズ記事も豊富ですから。 でもね、ひょっとするとですがね、もし自分がやりたいカスタマイズの方法が、どこにも見つからなかったらどうしましょう？  

・  

 

・・

 

・・・  

 

 

この記事について

安西先生のキツイお言葉に嗚咽をもらしながらも、わからんもんは、わからん。

うぅんぅぬんぅんぅん。

この記事は、そんなストレスを感じて悶々とした日々を送っている全Stingerユーザーに「これ知っておけば、自分の思うがままにStingerを操れる」事を目指して、書いてみました。

なので、この記事では「ここを、こう変えたら、こうなりますよ。わっしょい」というのを期待しては駄目です。もっと地味な、例えるなら筋トレやジョギングや修行のようなことを書いてます。

「修行かよ、めんどくさ。俺は、明日から収入倍増したいんじゃ」 確かにそれも一理あります。だれもが、無尽蔵にブログに時間かけることができるわけじゃありません。なので、なるべく最短距離でStingerカスタマイズを自分のものとする方法を意識して、書いてみます。

 

重要度の表示について

各修行には、冒頭に重要度書いてます。テキトーやけどニュアンスはこんな感じ。 ★★★・・・必須！！これ知っとかないと駄目レベル ★★☆・・・やったほうが、捗る可能性は高いかな ★☆☆・・・物好きの人だけやればいいよ

前提読者

「WordPressでブログ書いていて、Stinger3をテーマ適用している。」それだけです。最初はほんとに基礎から書いてるので、ある程度基礎知識ある人は、読み流してもらって結構です。

修行の数

修行の数は全部で８個です。ハッキリ言ってこの記事くっそ長いです。ある程度前提知識あるけど、Stingerよくしらないわ〜という人は、修行６〜８あたりを見てもらえればいいと思います。

• 修行１　HTML、CSSの基礎を身につける（重要度★★★）
• 修行２　PHPの基礎を身につける（重要度★★☆）
• 修行３　ローカル環境を構築する（重要度★☆☆～★★★）
• 修行４　素敵なエディタを用意する（重要度★★☆）
• 修行５　バージョン管理ソフトを導入する（重要度★☆☆）
• 修行６　Stingerの構造を理解する（最重要★★★）
• 修行７　Stingerの頻出コードを理解する（重要度★★★）
• 修行８　WordPressの関数を理解する（重要度★★☆）
• 卒業　他のリソースを活用する

この時点で断言します。

Stingerのカスタマイズ系記事を参考にする時は、修行６と修行７を理解しておくことを強く強くお勧めします。

 

修行の意味

これ自分の経験から言ってますが、ここらへんを知っている場合と知らない場合では、Stingerラブな皆さんが書いていただいている貴重なカスタマイズ記事を読んだ時の理解力が全然違います。

Stinger何も知らない状態でカスタマイズ記事を参考にすると、どうしても、木を見て森を見ずというか、その部分のみのカスタマイズにとどまって、自分での応用がまるで効かないんですよ。周囲の機能との関連性がわからない。

Stingerのバージョン違いであったりとか各種プラグインの挙動により、カスタマイズ記事と同じコードを書いても、自分の環境ではうまくいかない、といった経験は皆さんあると思います。そういった場合にも、Stingerそのものを知っていれば、効率よく切り抜けられる場面は多々有ります。

Stingerもこれから先、どんどんバージョンアップを重ねていくと思いますし、ブロガーの皆さんが使うバージョンもどんどん変わっていくことが想定されますので、カスタマイズ記事のコードがStingerユーザー全員で問題なく使えるとは限りません。

そんなときにも、Stingerの基礎知識を身につけておけば、時代の流れに翻弄されずにStingerを自分のモノとできるはずです。  

あぁ、前置き長くなったな・・・それではいってみよ！！  

 

修行１　HTML、CSSの基礎を身につける（重要度★★★）

HTMLとCSS。これ知ってないとどーしようもありません。

Stingerのコードを見ても、なんも理解できません。非常に簡単な部分でも良いので基礎を身につけておくことは必須です。 「HTMLとCSSの基礎」みたいな本を買ってきてもいいですが、ガッツリ一冊を全て学ぶのも効率が悪い。

このネット時代なら、学習もインターネットでスピードアップしたい、ということでおすすめの学習ソースを紹介します。

 

Codecademy

コードの書き方を学ぼう | Codecademy
Codecademyについては、以前オススメ記事書いてます。 Codecademyがプログラミング学習に最高に効率が良い３つの理由（ドットインストールに比べて）

おすすめの理由は上の記事で全部書いてますが、一番は「ブラウザ上で実際にタイピングしながら学べる」ということです。

この「実際に打ちながら」というのは、経験上すごく大事です。Codecademy凄い。素敵。惚れてまう。 大きいデメリットは「全編英語」という事。ただ、英語の文法自体はそんな難しいものでもないので、英語の勉強がてら気軽に取り組んでみるのもいいのではと思います。

おすすめコースはWebFundamentals。このコースだけでHTMLとCSSの基礎を効率よく学べます。CSSでのレイアウトが関係する「11.CSS Positioning」までは、是非やってみるとよろしいかと。

 

ドットインストール

3分動画でマスターする初心者向けプログラミング学習サイト – ドットインストール
日本のサイトでは、やっぱりこれ。動画コンテンツが素晴らしくわかりやすい。Codecademyの英語がどうにもピンと来ないのであれば、こちらがオススメです。

一つ一つの課題の粒度が丁度の大きさでよろしおす。 動画コンテンツなので、実際に自分で打ち込みながら試したほうが、理解は断然深まります。

・HTML入門（http://dotinstall.com/lessons/basic_html_v2） 「#09 imgタグで画像を表示させよう」までで十分です。#10以降はformの話になるので、Stingerカスタマイズでは不要です。

・CSS入門（http://dotinstall.com/lessons/basic_css） これは、「#12レイアウトを作る」までは頑張って理解しましょう！！これを知ってるのと知らないのでは、レイアウトカスタマイズの幅にかなり違いがでてきます。

CSS初心者の自分は、レイアウトについてはCodecademyよりは、こっちのほうががわかりやすかったです。

 

修行２　PHPの基礎を身につける（重要度★★☆）

WordPressは、PHPというプログラミング言語で書かれています。もちろんStingerのファイルもPHPで書かれているんですが、PHPに慣れてない場合、Stingerのコードみても、なにがなんやらよくわかりません。

「プログラミング？無理、やめるわ」 ところがどっこい、Stingerカスタマイズにおいて、必要なPHPの知識はそれほど多くないです。ドットインストールで、思いっきりピンポイントでいくとこんな感じです。

・PHP入門（基本編）（http://dotinstall.com/lessons/basic_php_beginner）
#01 PHPとは何か？
#02 はじめてのPHPプログラム
#08 ifで条件分岐をしてみよう (1)
#09 ifで条件分岐をしてみよう (2)
#18 関数を使ってみよう

これでOKです。これ以外は不要なので、逆にこれだけは理解しましょう。

 

修行３　ローカル環境を構築する（重要度★☆☆～★★★）

WordPressでテーマをカスタマイズする時に、「できればやっておけば良い」という文脈で語られるローカル環境の構築ですが、自分的にはこれ「必須」です。理由は主に2つ。

サイトを壊す事なく作業できる

ある程度のカスタマイズをやってると、「なんかコード書き換えたら画面が真っ白になって、頭も真っ白け」ということは、よく有ります。自分の大切なブログを壊さないためにも、ローカルで試してからサイトにアップロードするようにしましょう。

効率よく作業できる

特にカスタマイズを試行錯誤する段階では、必ずトライ＆エラーになるので、コードを頻繁に書き換えまくります。それをWebの管理画面でやるなんて、ハッキリ言って時間の無駄です。

ローカル環境の整備に使った時間は、必ず後で回収できます。ちょっとタイムロスしますが、未来を信じてここでじっくり、腰を落ち着けてやってみましょう。

ローカル環境の構築には、主に２種類あります。普通は構築1やってれば十分だと思います。

 

構築１「WordPressを最初からインストールする方法」

自分のPCにWordPressの環境をイチから構築します。面倒臭そうだけど、最近はちょちょいのポンでできます。最近はBitnamiを使うのが簡単ですね。参考になるサイトはこちら。

・Windowsの場合 PCにWordPressを！BitNamiインストールと日本語化までの全手順

・Macの場合 超簡単！WordPressのローカル環境をBitNamiを使って構築する方法・手順を解説します。 | iPhone・Macの情報発信ブログ “NUMBER333” 

 

構築２「自分のブログデータを反映しての構築する方法」

「ローカル環境にも、自分のブログデータを全て反映したい！！」 確かにブログデータがローカルにあったほうが、カスタマイズしてても楽しいです。が！！、こちらは、難易度と面倒くささが跳ね上がるのでオススメはしません。

WordPressの構造とデータベースに対する基礎知識が無いと、ハマる可能性がそれなりにあります。 参考にするなら、ここらへんがいいかな。

BackWPupでバックアップしたWordPressサイトをローカルPCに復元する方法

さくらのVPS を改めて使いはじめる 7 – WordPress | アカベコマイリ

自分もやりましたが、読み込むCSSがどんだけやってもローカルのパスにならずに、2時間程苦悶しました。出来上がりのイメージはこんな感じです。

SNSボタンが凄いことになってるのは、localhostだから。はてブにlocalhostあるんですよ。皆さんしってました？

完了したときは嬉しかったなぁ。。。（一部変だけど、(ﾟεﾟ)ｷﾆｼﾅｲ!!）ニーズがアレば、自分でもこの方法について、詳しく記事書きたいと思います。

 

修行４　素敵なエディタを用意する（重要度★★☆）

コードを編集するとき、専用のエディタがあったほうが、タグ等が色分けされて断然捗ります。見た目もカラフルだと楽しいしね。手間でもないので、是非用意しましょう。

 

SublimeText

Sublime Text: The text editor you’ll fall in love with

特にこだわりが無ければ、最近の流行SublimeTextあたりが良いかと。

使い方などはこちらが詳しいです。 ”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG

 

NetBeans

NetBeans NetBeans 日本語サイト 自分はコレ使ってます。いわゆるIDE（統合開発環境）で、Wordpressのテーマカスタマイズには機能多すぎですが、デバッグも気軽にできるし、コード補完とかも当たり前にしてくれるし、関数参照とかも思いのまま。

余裕があると、こういうのも入れてみるといろいろ楽しいです。

NetBeansでの開発については、こちらが詳しいです。 NetBeans IDE – PHP開発 

 

修行５　バージョン管理ソフトを導入する（重要度★☆☆）

バージョン管理ソフトとは、コードの履歴を管理してくれるソフトです。がっつりカスタマイズしていて、「あぁ、なんかよくわかなんなくなった。フレッシュだったあの頃に戻りたい・・・」と思った時にも、即座にそのときに戻してくれるありがたいソフトでございます。

Dropboxなんかは、勝手に履歴をとってくれるので良いですね。オススメ。

自分は、バージョン管理ソフトにGitとGUIクライアントにSourceTree使ってます。SourceTreeは最高に使いやすく、あらゆるものの履歴管理に超オススメですよ。

Gitについては、こちらがわかりやすいです。

サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ

 

導入の手間も学習も時間がかかるので、WordPressのテーマカスタマイズのためだけに、この環境を整えるのは時間効率的にあまりオススメはできません。

ただ、非常に便利な概念ではあるので、興味があるかたは、是非積極的に触ってみてください。      

ここまででStingerカスタマイズのための武器は揃いました。もう、ウォーミングアップ十分。筋肉モリモリ。 ようやく本番。Stingerそのものに足を踏み入れますよ！！

   

修行６　Stingerの構造を理解する（最重要★★★）

カスタマイズするときの最重要ポイントはこれです。ざっくり書いてみました。これで、画面構成要素と主要ファイルの位置づけをがっちり把握しましょう。

わかりやすさを優先してるので、phpの階層は厳密にはこれとは違います。ただ、これがあれば、変えたいところは直感的にわかります。以下、主要ファイルの内容について解説。

前提として、自分がベースにしているStingerのバージョンは「Stinger3ver20130925」です。現在の最新バージョンと多少違う可能性はありますが、大筋は変わらないはずです。

 

実際にやってほしいこと

主要ファイルのコードを注意深くみて、構造を把握してみてください。自分なりに各コードのポイントとなる部分を記載していますので、それと照らしあわせてみると、なんとなくでもコードの内容が把握できてくるかと思います。

できれば、少しでもいいのでコードの内容を変更してみて、画面にどのような変化があるか試してみると、理解が段違いに早くなります。

 

header.php

サイトのトップ部分。頭の部分です。ここには以下の情報が含まれます。

 

サイトのメタ情報

これはhtmlの<head></head>タグに相当します。画面の表示には直接関わりませんが、サイト全体の情報を管理する、超重要部分です。 ページのタイトルや、検索ロボット制御や、GoogleAnalyticsのコードや、OGP設定等はここに書くことになります。

トップ部分の表示内容

<body>タグ以降の上の方、サイト文字列や、トップ画像、ナビゲーション・メニューが含まれます。スマホだと、上部に「About」と出てますよね。そこのカスタマイズとかもここでやります。  

footer.php

サイトのボトム部分。足元ですね。ここには以下の情報が含まれます。

 

サイトのフッター表示

Stingerの著作権情報等があります。地味だけど、ここをカスタマイズすると、サイト全体が引き締まります。なかなかここまで気にかけてる人も少ないのでは。自分は全くなんも変えてませんが。はい〜。 フッターカスタマイズについては、AdventCalendar５日目のこちらの記事が詳しいです。うぅーん、マニアック！！

おしゃれは足元から！Stinger3フッターカスタマイズで差をつけろ！#Stinger-WP  

 

PCとスマホで使用するjavascriptの切替

PC用JavaScript「base.js」と、スマホ用javascript「smartbase.js」を切り替えてます。

追尾型SNSボタンの表示制御

Stingerの特徴でもある追尾SNSボタンの制御もここにあります。get_template_part(‘sns02’)というのが、該当コードです。最新バージョンのStingerでは、スマホだと非表示になってますね。不評だったらしいです。。。  

 

sidebar.php

みんな大好きサイドバー。カスタマイズしがいがありますねぇ。

でもここは、他に比べてちょっとややこしい。なんでかというと、Web画面で管理するウィジェットが密接に関わってくるからです。 sidebar.phpの記載内容は、以下の順番です。行数とコードはポイントとなる部分の抜粋ですよ。

ウィジェット　「Googleアドセンス用」

５行目 <?php get_template_part(‘ad’);?>

ブログ内検索

８行目 <?php get_search_form(); ?>

最近のエントリ

１０行目から３０行ぐらい　<!–最近のエントリ–>〜<!–/最近のエントリ–>の間

ウィジェット　「サイドバー１」

４５行目 function_exists(‘dynamic_sidebar’) && dynamic_sidebar(1)

ウィジェット　「スクロール広告用」

５３行目 <?php get_template_part(‘scroll-ad’);?> とこうなってます。最近のエントリ消したりとか、あとは自分で設定したウィジェット「サイドバー１」の場所を変えたりとかは、これを目安に探ってみるとわかりやすいと思います。 実際の順番を変える時は、上記コードの前後のdiv要素やstyleなんかも忘れずに移動するように注意して下さい。

 

home.php

TOP画面の中央部分です。「index.php」ではありませんよ。そふぁねさんもハマってました。

TOP画面をカスタマイズする時は、この「home.php」を変更してください。中身は以下の２つ。

・各記事のサムネイル表示、タイトル、冒頭部分抜粋

・下部のページナビゲーション

 

single.php

個別記事のコードです。これもカスタマイズしがいありますな！！構造は以下のとおり。行数はStingerのバージョンやカスタマイズ状況によって異なるので、あくまで目安ということで。

パンくずリスト

３行目 <div class=”kuzu”>

記事内容

２９行目　<div class=“kizi”>から２０行ぐらい

広告枠

４９行目から <div style=”padding:20px 0px;”> <?php get_template_part(‘ad’);?> </div>

SNSボタン

５２行目　<?php get_template_part(‘sns’);?> ここで、sns.phpを読みます。

関連記事

６３行目<div class=”kizi02”>から、６０行ぐらい ここから関連記事。ここはいろいろやりたい人も多いのでは？

広告枠

１１８行目から <div style=”padding:20px 0px;”> <?php get_template_part(‘ad’);?> </div>

コメント欄

１２２行目　<?php comments_template(); ?>

ページナビゲーション（前後）

１２５行目　<div class=”p-navi clearfix”>   archive.phpとsearch.phpは説明省きます。まぁ他とそんなに違わないので、ここまででStingerのコード読むのに慣れておけば、特に難しいところは無いと思います。 その他、部品系のphpはこちら。

 

ad.php

ウィジェットの「Googleアドセンス」「Googleアドセンスのスマホ用」の中身を読み込みます。ad.phpの中で、これらPC用とスマホ用のアドセンスを切り替えて表示しています。

 

scroll-ad.php

ウィジェットの「スクロール広告用」の中身を読み込みます。

 

sns.php

記事に埋め込まれるSNSボタンを定義します。

 

sns02.php

フローティングする追尾型SNSボタンを定義します。

   

修行７　頻出コードを理解する（重要度★★★）

これも重要です。Stingerで構造を理解するのにポイントとなるコードが何個かあります。これは、最初に覚えておくとコード読むのがすっごく楽なので、個別に解説します。  

テーマ用の関数はfunctions.phpに書く

Stinger独自で定義されるphpの関数は、全てfunctions.phpにかかれてます。よくわかんない関数があったら、まずはこれを見ましょう。  

PC版とスマホ版の処理の切り分け

これはいたるところに出てくるので慣れましょう！！ 例としてfooter.phpのこの部分では、追尾型SNSボタンの「SNS02」を、スマホでは非表示にしてます。

他にも、似たようなコードにこんなのがあります（使い分けがよくわからなかったりしますが・・・）

 

ただ、最新のStingerでは、このPCとスマホの判定処理は、全てfunctions.phpに統一されたようです。覚えておきましょう。

WordPress3.8確認済みのSTINGER3 ver20131215を公開しました。

 

外部PHPの読み込み

PHPの中から、他のPHPの内容を読み込むときに、この関数が使われてます。 <?php get_template_part(‘sns02’);?> この例では、shs02.phpが呼ばれるので、中身はそちらを見に行きましょう。  

ウィジェット内容の追加

ウィジェットの追加ではdynamic_sidebar関数を使います。みんな大好き、ad.phpに登場してもらいましょう。

 

この処理では、スマホの時にdynamic_sidebar(4)を読み込んで、dynamic_sidebar(3)を読み込んでます。この４とか３とかの数字はなんじゃらほいですが、これが実はウィジェットの下記番号と対応してます。

つまり、ad.phpでは、スマホの時に「Googleアドセンスのスマホ用Width300」を、PCの時に「Googleアドセンス用」を読み込んでいるというわけです。まぁ結果は当たり前やけど。

さらに、「このウィジェットと数字の対応ってどこで定義されているの？」と疑問に思えば、もう先生何も言うこと有りません。

functions.phpの１４１行目あたりに、register_sidebarsという関数があって、ここの配列に追加した順番が上記番号と対応しているのですよ。

Googleアドセンス周辺をカスタマイズする時は、ここらへん理解してないとよくわかんなくなります。その上で、グアバさんのこの記事見ると、なにも知らない時に見た時と比べて、理解力が全然違います。

 

アドセンス収益が2倍に！STINGER3で収益アップするためのカスタマイズ #Stinger-WP | love guava!

 

広告周りとか、カスタマイズしだすと面白そうです。んだ。

 

修行８　WordPressの関数を理解する（重要度★★☆）

Stingerの中では、もちろんWordPressの関数も使われてます。というか、使われまくってます。なので、それらを調べるための情報ソースを知っておく必要があります。

関数リファレンス – WordPress Codex 日本語版

基本はこちら。分類分けが丁寧なので、なんかよくわからない関数を調べたり、逆に「こんなこと、出来ないかなぁ」と思った時に、使う関数を選ぶのに重宝します。 もうすこし、実践的なカスタマイズ方法の代表例とかだと、こちらのサイトが詳しいです。

WordPress のよくあるカスタマイズコード functions.php 多め
いきなり、イチからガッツリ自分のカスタマイズコードを入れていくのもなかなか敷居が高いので、この記事などを事前に参照しながら書いていくと、わかりやすいと思います。  

 

卒業 他のリソースを活用する

ここまできておけば、後は何も言うこと有りません。早速カスタマイズに着手するも良し。改めて他のカスタマイズ記事をみて、参考にしつつ自分のオリジナルを出すも良し。

既存のカスタマイズ記事を参照するには、こちらの記事が物凄く便利です。是非活用してみてください。いろいろ刺激されて「自分はこうやってみよう」と思うこと請け合いです。

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

 ここまでは基本編ということで、さらなる高速化や最適化を目指していくには、こちらの記事が超充実しています。中級編〜上級編となりますが、さらなるStingerの可能性を感じることが出来ますので、是非、こちらも参考にされることをおすすめします。

[試] WordPressテーマ STINGER3の時代が来た。だからこそその先へ！一歩先行く+αカスタマイズ術 #Stinger-WP | 試行錯誤ライフハック

最後に

この場を借りて感謝したい人が２人います。

一人は、言わずと知れたStinger作者の@ENJILOGさん。自分がブログをFC2からWordPressに引っ越してから３ヶ月ほど。最初は右も左もわからず苦労しましたが、Stingerのおかげで楽しくブログ生活送らせてもらってます。

もう一人は、 このAdventCalender2013の主催者である、@niji_mamiさん。今回、この企画を聞いた時に、WordPressの事なんも知らないくせに勢いで手をあげてしまいましたが、まぁ、なんとか記事書くこと出来ました。内心冷や汗モンでしたが。

どんなことでも、一番最初に手を上げて企画することって凄いパワーがいると思うんです。こんな機会をいただけたことに感謝してます。      

あぁー、疲れたｗ　この記事だけで５記事分ぐらいの体力使ってるよ。まぁ、書きたいこと書けたからそれでよし。 そんなわけで、次のりゅんたさん@RyunNoteさんにバトンを渡します！！皆さん、良い年越しを。

 

追記（2013/12/21）

AdventCalendarの別ネタ候補で記事書きました。こっちは、Stingerと出会ったことについて、のんびりつらつら書いてます。

Stingerと私の出会い、そしてくんずほぐれつな想い出