デフォルトテーマのコードで3カラム化に挑戦

投稿日:

前回までのカスタマイズで、AFFINGER4のサイトの3カラム化はもう無理かなーと思っていたのですが、他のカスタマイズ法を試してみたところ、上手く3カラム化することはまぁ出来なかったのですが、前回の問題点がいくつか改善できたので、今回の記事はその備忘録です。

 

今回行ったカスタマイズは、WordPressのデフォルトテーマの一つだった『Twenty Twelve』をベースにしたものです。

始めにやるのは新規作成する左サイドバーウィジェットの定義。
これは前回とほぼ同じく、子テーマのfunctions.phpへ追記します。

前回の場合は次にこのウィジェットを表示させるために、3カラム化させたいテンプレートファイルへのカスタマイズへ移りました。home.phpでトップページから3カラム化させました。

しかし今回のカスタマイズでは、その前に「sidebar.php」を編集します。
ちょっと書いてあることが難しかったんですが、sidebar.phpをコピーした「sidebar-right.php」という新規ファイルをFTPで作り、そこに先に作った"sidebar-26"を使えるようにする(?)コードを追記します。

その後に改めてサイドバーを表示させるためにテンプレートファイルを編集します。
どこから始めても良いらしいので、私は固定ページ用の「page.php」に手を付けました。

ここのカスタマイズはとても簡単で、該当部分に
"<?php get_sidebar( 'right' ); ?>"
を差し込むだけ。
さっき作ったsidebar-right.phpを読み込ませるコードでしょうかね。

そして最後に子テーマのstyle.cssでレイアウトを整えます。

工程が1つ増えてしまったものの、functionで定義したウィジェットをsidebarで使えるようにし、そのsidebarを3カラム表示させたいテンプレートファイルで読み込む、と分かりやすい構造になっています。

前回のは既存の右サイドバーをdivで囲って新規ウィジェットを同列に表示する??だとかなんとか、実はよく分からずに使わせてもらってました。

 
工程こそ変わりはしましたが、やろうとしていることは一緒なので、どうせこれも前回と同じような出来になるんだろうなーと思っていたのですが、かなりの違いがありました。

一つは子テーマのスタイルシートに追記したコード。ここの
#content {
width: 54.0%;
}
の部分。(抜粋)

前回は3カラムの際のレイアウトを、新規作成した"content-right"という右サイドバー+記事エリアの横幅でしか変更できませんでした。
しかも実際に幅が変化するのは記事エリアのみ。右サイドバーエリアの幅は変えられず、そのせいで左サイドバーもその幅に合わせるしかなく、結果各エリアを400pxずつの1/3に区切っただけの3カラム表示となりました。

ところが今回のこのコードでは、width: 54.0%;と、「%」が使われているため、記事エリアがサイドバーの幅に影響されず、割合で固定されて表示されています!!
おそらく残りの46%が2分割されて左・右サイドバーのエリアの横幅として表示されているんだと思います。

これならAFFINGERのデフォルトの右サイドバーの幅がいじれなくったって、記事エリアを広げる事により、実質的に右サイドバーエリアを狭める事ができますね!
いや~「%」、こんな便利な物があったとは!
しかもこれならpxと違い、見る人のモニターサイズが違っても同じ比率で見れますよね?

これで前回の3カラム表示のバランスの悪さは改善できるんじゃないかと思います。

 
そしてもう一つの改善点。
「STINGERオリジナルボタン」等のデザインが、サイトの端から端まで、記事エリアのバックを貫通してしまっていたヤツ。これが直っていました!

前回のはおそらくですが、「左サイドバーエリア」という場所は元々無かったんだと思います。
その左サイドバーに設置した「ウィジェットのみ」を記事エリア左に並べていただけなんじゃないかと。

今回のはウィジェットに何も設置していなくても、サイト表示上は左サイドバーエリアが確保された3カラムとして表示されていますが、前回のはウィジェットを何かしら設置するまで3カラムとして表示されなかったんですよね。

そのため前回のでは左のサイドバーエリアとデフォルトの右のサイドバーエリアが中央の記事エリアを隔てて繋がってしまっていた。ってことなんだと思います。

対して今回のカスタマイズ法では、事前にsidebar-rightとして新規のサイドバーを作成し、ウィジェットを含めたその新規サイドバーを丸ごと読み込んでいる形になっているため、この呼び出された2つ目のサイドバーの設置場所が、「左サイドバーエリア」として機能しているんじゃないでしょうか。
一手間増えた甲斐はありましたね。

違いといえば、今回のサイドバーエリアにはAFFINGERで設定しておいた背景色が反映されておらず、そこだけ真っ白で表示されていた、ってところですね。

AFFINGERの機能で作った物では無いので、きっとここにはテーマカスタマイザーでのデザイン変更は効かないでしょう。
色とか変えたかったら、CSSで指定する事になるのだと思います。
コードが書けない私にはこれはちょっとデメリットですね。

 

さて、こんな感じで若干の進展はあったように思えるんですが、今回のやり方では、sidebar-rightの中身は親テーマのsidebar.phpの中身をそのままコピペしてきたので、左サイドバーにも右サイドバーと同じウィジェットが表示されてしまっていたんですよね…

このままでは表示はぐっちゃぐちゃ。
それを阻止するために今回はその場しのぎとして[サイト全体を1カラムにする ]にチェックを入れ、デフォのサイドバーウィジェットを非表示にしてあります。
なので表示上は3カラムにはなっているんですが、右サイドバーエリアは空っぽです。

sidebar-rightの中身をいじったりすればいいのでしょうが、ちょーっと頭がこんがらがりつつあるので、もう少し改善できそうな点はありそうではあったんですが、頭の整理も兼ねて一旦記事にしておきました。

 
しかし、仮にそれで両方のサイドバーエリアにウィジェットを設置できたとしても、前回からの最大の問題点、ウィジェットの表示崩れは改善できてません。

今回の記事で貫通してしまっていたデザインが直ったと書きましたが、前回最初の1件のみしか表示されないと言っていた「STINGER最新の投稿一覧」が、今回のでは全く表示されなくなったり、やはり新規ウィジェットへの設置はおかしい点だらけです。

前回の記事ではこれをAFFINGER4そのもののCSSへ手を加える必要がある、と書きましたが、今回のカスタマイズで分かりましたが、3カラム化にはAFFINGER4のオリジナルコードをコピペしまくってカスタマイズしていくしかないんじゃないでしょうか?

新しくfunctionで定義してウィジェットを作っても、それはAFFINGERの機能で作った物では無い、いわば「WordPressウィジェット」なんですよね。
私、そして3カラム化したいと思っている人ってきっと今使ってるテーマのウィジェット機能で拡張していける3カラム(左サイドバー)を求めているはずですよね?
そのためには「WordPressウィジェット」ではなく「AFFINGERウィジェット」でなくてはならない。

このAFFINGERウィジェットを新規で作るためには、この新規ウィジェットに対し、AFFINGERがオリジナルのウィジェットに対して定義しているコードを全て複製し、それらを読み込んで(呼び出して)いる部分もまた全て複製、全く同じだと右サイドバーが2個できてしまうだけなので、IDは新規の物に差し替えた上で、その複製した左サイドバーを呼び出す事ができれば、きっとAFFINGERウィジェットとしての左サイドバーができるんじゃないかなー、なんて思いますが、私はコードカスタマイズに関してはド素人なんで見当違いの事言ってるかも(^^;

 
つまり何が言いたいかというと、やっぱ3カラム化、もといウィジェットを正しく表示させた3カラム化は無理なんじゃないかと。

3カラム化に挑戦するにあたって、サイドバーの構造やらCSSにもけっこうガッツリ触れてきたと思いますが、なんというか、知れば知るほどにコレ無理なんじゃね?って思いが強くなっていくんですよね。

まったく何をどうすればいいのか分からない~って段階から、ここはこうなってそうなってるから無理なんだ~ってのが分かるっくらいにはなってしまったからでしょかね?
これも成長したと言っていいのか?

今の私に言えるのは「最初っから3カラム表示できるテーマを使え」ってことぐらいですね(笑)

-ウェブサイト作成

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