STINGERのコードで3カラム化に挑戦

投稿日:2017年6月1日

いよいよAFFINGER4の3カラム化に挑戦していきたいと思います。

前々回の「3カラム化計画案」の記事で書いたように、大まかに方法は3つ。

①一からサイドバーをデザインする

②『STINGER』のサイドバーを追加する

③プラグインを使用する

今回は、上記②のやり方を試していきます。

完成した時の出来はこれが一番良いはずなので、上手くいってほしいところですが、いくら姉妹テーマとはいえ、AFFINGERにSTINGERのコードがそのまま使えるとは思えません。

3カラム化に強いこだわりを持つ私としては、駄目元であってもやってみるほかありません。

 

まずは3カラム化のカスタマイズをするにあたり、どういった手順で作業していくのか軽く予習しておこうと思います。
今回のカスタマイズは、今までやってきたものよりも明らかに作業量も多く、難易度も高いはずなので、全体の流れだけでも把握しておければ、途中でこんがらがることも減るんじゃないかな~と。

複数の3カラム化のカスタマイズ記事を見比べてみたのですが、大きく作業は3つの工程に分かれるようです。

①サイドバーウィジェットの定義

②作成したサイドバーを表示

③CSSでレイアウトを整える

基本はどのやり方でもこんな感じみたいです。

重要となりそうなのは②の過程ですかね。
ここはやり方によって手を加えるファイルが異なっていたので、完成形にも影響が出てくる部分なのかもしれません。

対して①の過程に関しては、どのやり方でも大体一緒のようです。
なんかWordPressのカスタマイズの基本的な作業らしいです。

 

それではその①サイドバーウィジェットの定義の作業に入ります。
ここは「functions.php」にコードを追記するようです。

…function、確かコレは下手にいじるとWordPressがブッ壊れるという噂の例のアレですかね?

カスタマイズ記事の中でも子テーマの作成を勧めておられたので、早速用意しよう…と思ったら、既にありますね。

子テーマのfunctions.phpの中身はえらくスッカスカ。
子テーマのphpファイルは親テーマを無視して反映されるものかと思ってましたが、これは違うんですかね?

親テーマより「優先する」という形で子テーマを読み込んでいるのならば、style.cssに近い物なのでしょうか?

サッパリ分かりませんが、とりあえず子テーマならいざとなったら丸ごと消せば多分大丈夫でしょう。
あ、元コードは念のためローカル保存しておきましょ。ついでに親コードも。

さらに念には念を。サイトのバックアップも取っておきます。

私は『BackWPup』というプラグインを使っています。
WordPressの初期設定をする際、参考にさせて頂いたサイトが「必須プラグイン」だと言っていたので、それを信じてとりあえず使い続けてます。

 
さて、バックアップも完了したとこで、いよいよ本格的に作業を開始します。
といっても、いつも通りにネット上のコードをコピペするだけなんですけどね。コード読めんし。

「左サイドバーウィジェット」を使えるようにするためにするコードなんですが、一つ困ったことが。

参考サイトはSTINGERのカスタマイズ法なので、ここで指定している"ID"の数がAFFINGERとは異なるっぽいんですよね。

詳しい解説がそのサイトには無かったので、別テーマでの3カラム化の記事を書いているサイトを見ると、どうやらこのIDの数は、デフォルトで用意されているウィジェットの数+1としているようです。

WordPressの昔のデフォルトテーマの『Twenty Eleven』では"sidebar-6"、今見ている『STINGER PLUS』では"sidebar-14"、では『AFFINGER4』ではいくつなのか?

先ほどバックアップを取ったfunctions.phpなのですが、この親テーマをコピーする際にザッと中身を見てみたのですが、子テーマとは違い膨大な量のコードが書かれていました。

そんでその中からサイドバーに関するコードを見つけました。
そこには今まさに定義しようとしている左サイドバーウィジェットと同じような形式で書かれたAFFINGER4のウィジェットがズラーっと書かれていました。

"sidebar-1"~"sidebar-25"までの計25個…と思いきや、"sidebar-7"はありませんでした。
過去のアップデートか何かで無くなったんですかね?([ウィジェット]画面で確認してみると、AFFINGER4のウィジェットは24個でした。)

というわけでデフォルトで使用されているIDは"25"まで。
なので今回の左サイドバーのIDは"26"としておきます。

今後のカスタマイズでも必要になるかもしれませんので、このAFFINGERのウィジェットIDの一覧をノートにメモっておくことにしました。

ただ、最新のsidebar-25が「アコーディオンメニューに表示」ウィジェットと、最近のアップデートで追加された物のようなので、今回追加したsidebar-26がデフォルトで使用される時が来るかもしれません。
その時はこのIDを変えないといけないんでしょうね。メンドくせ

(…後から知ったのですが、この"ID"ってのは好きな名称を付けてもいいっぽい?)

これで[ウィジェット]画面に新しい「左サイドバー」というウィジェットが追加されてました!
ウィジェットって自分で作れるんですね~。

 

お次は②作成したサイドバーを表示の作業となります。

コードを見ても私には何をやってるんだかまるで分かりませんが(いつも通り)、とりあえずはトップページ用の「home.php」をカスタマイズするようです。
なのでFTPでコピーし、子テーマを作成。

元コードに新規のコードを挟み込み・及び追加をするのですが、この元コードがSTINGERなのではてさてどうなることやら…

ネットのコードと見比べてみると、どうやら構造自体はAFFINGERと共通しているらしく、このコードはそのまま使えそうです。

で、書かれている通りに作業したのですが、サイト表示上は何も変わっていません。

試しに先ほど作った「左サイドバー」ウィジェットにテキトーにウィジェットを設置してみたところ、記事エリアの直下に表示されました!

表示されてる場所こそおかしいものの、それは多分これからCSSで調整するものだと思うので、ここまでは上手くいってるんじゃないでしょうか!?

 

最後は③CSSでレイアウトを整えるの作業を行います。
こちらはstyle.cssを編集します。

これまで通り、子テーマの方へコードを追記します。

しかし、ここもどうやらSTINGERの元コードへ挿入する形となっているようです。

ところが!その元コードがAFFINGERでは見当たりません!
似たようなのは確かにあるんですが、細部が少し違っているのです…

デフォルトのコードを書き直すのはマズイと思うので、STINGERの元コードごと新規コードを追加してみました。

で、表示確認してみましたが…
変わってません!!
なんだかヤな流れになってきたような…

その後、ネット上のコードを差し込む場所を探し当てるため、ひたっすらにコピペ→表示確認を試しまくってみたのですが、まるで変化無し…

う~ん、ウィジェットが左サイドバーの位置までいかないにしても、何かしら変化はあっても良いのでは??

子テーマのstyle.cssの差し込めそうな場所には全て入れてみましたが、やはり変化無し。
CSSが反映されてないのだろうか?

 
ここまでいじって諦めたくはないので、半ばヤケクソ気味で、[AFFINGER管理]より、[サイト全体のレイアウト一括設定]の項をガッチャガッチャいじり倒してみました。

「サイドバーを左にする」や、「サイト全体を1カラムにする 」・「サイト全体をLP化する」、「PC閲覧時のサイトの幅」をフルハイビジョンモニターの1920pxに変えてみたり…

どうせ3カラムにできなかったら今までやったカスタマイズなんて意味ないんじゃーーってぐらいの勢いでサイト全体のデザインに関わる部分をいじり回してみましたが、追加したウィジェットに変化は無し…
あ、サイトのレイアウトは設定戻したらちゃんと直ってくれました。これに関しては一安心。

 
他にコードを差し込める場所を探して、禁断の親テーマを覗いてみる。
最初はやはりstyle.cssから。

今探している方のSTINGERの元コードとの共通するコードは見つかりませんでしたが、もう一つのスマートフォン用の元コードと同じものは見つけることができました。
CSSへ書き込むコードは2つあったのです。

そこへ先に2つ目のコードを入れてみましたが、PC上では変化無し。
まぁまずはPCでのカスタマイズができていないとどうしようもないですよね。
そもそも3カラムで表示されるのはPCだけな訳ですから。

で、これ以上どうしようもなくなってきた時、さっき見たAFFINGER管理画面を思い出しました。

そこにはサイドバーを左に換えた場合、「CSSは「st-kanricss.php」で管理されています」と書かれていました。

「st-kanricss.php」、今まで見たことない場所ですね。

最後の希望を求め中を見てみると…
見つけました!STINGERの元コードと酷似したコードを!
…厳密にはちょっと違ったのですが、たぶん同じ事を書いてるんじゃないかと思う。てか思いたい。

そして親テーマだろうとおかまいなしにネット上のコードをブチ込んでみると…

変化無し!!

ハイ、お手上げです。
もー、どーにもできん。
くっ、殺せ!って気分。くっころ気分。

 

…というわけで、ムリでした~~\(^o^)/

まぁまぁ、今回のカスタマイズはもともとSTINGER用のコードでしたからね、予想通りっちゃー予想通りですわね。

ホントは諦め悪く、他のカスタマイズ法のコードをムリヤリ持ってきたり、いろいろと親テーマのファイルを子テーマに作っておいたり、親テーマにあった「sidebar-type2.php」なるファイルをいじってみたりもしたんですが、追加したウィジェットの表示位置が右サイドバーの上に行ったり下に行ったりはするものの、CSSが全く反映されないんですよね…

CSSいじり始めの頃、「CSSを編集してページナビを整える」の記事で書いたような反映されない状態とは違うはずなんですよね…
そこは克服できたからこそ、今まで追加してきたサムネ付きページナビ、展開式コメント欄はちゃんと機能してる訳ですし…

やっぱテーマが違うとなんか色々と違ってくるんですかね?

 
できなかったもんは仕方ない、次いきましょ、次!

STINGER用のコードは今回の1パターンのみだったので、次は別テーマでの3カラム化カスタマイズをこれまた駄目元でやってみようと思います。

STINGER用のカスタマイズ法は良さげなのがホントはもうひとつあったのですが、この1,2ヶ月くらいの間にその記事のあったブログ無くなっちゃってたんですよね…

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.