※今回は基本読むだけの設計パートなので、 すぐに組みたい人は次回のパートへ進んでください。

Wordpressでちゃんとしたテーマってコンテンツを好きに入れ替えられるんですよね。

ウィジェット形式だったり、ソースコード側で差し替えたり、 色んな方法でブログのコンテンツの位置を変更できたりします。

私一人で使う場合はそれこそソースコードを自分で差し替えるだけなので、 別にいらない機能なのです。

Web制作に精通していない人はソースコードをいじるのは難易度が高いですし、 規約によっては買ったテーマの保証が無くなってそれ以降はサポートを受けられなくなってしまう可能性もあります。

なので今回は私以外の人も使うテーマということでこの機能を盛り込んでいきます。

ちょっと長くなりそうなので、設計パートと実際に組んでいくパートが必要になりそうです。

それでは設計を考えていきましょう。

まずブログをどのようなカラム形式にするか

ブログは大きく分けてタイトルと記事がある1カラム。

タイトルと記事とサイドバーがある２カラム。

そして２カラムにもう１つサイドバーを足した3カラム。

この3つに分けられることが多いです。

そして３カラムに関してはWebサイト閲覧方法が８割り以上 スマホが主流になってしまったためほぼ廃れているカラムです。

なので一般的なブログにする場合は１カラムか、 ２カラムでサイドバーの位置を左右に変更できる計３パターンに 切り替えられればいいんじゃないでしょうか。

私の作っていくブログはこの３パターンを切り替えられるようにします。

欲を言えばトップページ、つまりindex.phpでは２カラムにしておいて 記事単体のときは記事に集中させたいので１カラムにする。

というのが個人的には理想かなと思ってます。

記事読んでるときにサイドバーがあると気が散るし邪魔なんですよね。

広告とかつけるならそっちのほうが成果はあがるんですが、 目的が記事を読むじゃなくてお金を稼ぐになってしまうので、 もはやそれはブロガーじゃなくてアフィリエイターですね。

もちろんアフィリエイトもできるように意識して作るつもりではありますが、 あくまでブログは記事を読む・書くためのものにしていきます。

カラムの変更はセレクト方式で選べられるようにする

カラムの数が決まったところで、どうやって変更するか決めていきましょう。

結論から言うとお題にもあるようにセレクト方式が理想なんじゃないでしょうか。

私は一覧ページと単体ページでカラムを切り替えられるようにしようと思います。

もちろん同じでいいって人は両方とも同じタイプのカラムを選択していればいいと行った感じです。

一覧ページは左カラム、単体ページは右カラムって人はあんまり居ないと思いますが 副産物になりそうなので一応できるようにはしておこうかなと思います（笑）

前回作ったテーマのオプションメニューにこの機能セレクト機能を盛り込むか ライブプレビューで盛り込むかなやんでましたが、オプションメニューで切り替えるように決めました。

なぜなら面倒くさいから（笑）

ライブプレビュー時にカラム変更をすると、 ライブプレビューでイジることができる設定項目もガラッと変わるので、 ユーザー側も混乱するんじゃないかなと思います。

なのでテーマオプションで決めてもらって、 ライブプレビューをするときはオプションの値を見て、 どのライブプレビュータイプを表示するのか判断して設定項目を変化させる。

としたほうが私も楽ですし、触るユーザー側も混乱しなくて済むんじゃないでしょうか。

実際にライブプレビューでカラムを変えてみて別に大丈夫そうなら ライブプレビュー側にカラム変更の項目を仕込もうと思います。

ある程度制約をつけないと完成しないので注意

カラムを自由に変更できるからといっていろんなことを盛り込みすぎると 収集がつかなくなり一向に完成させることができなくなります。

なので最初に決めたこと以上のことは基本盛り込まないように心がけましょう。

もし作ってる最中で「あ、これあったほうがいいな」っていうのが必ずでてきます。

便利になればなるほど更に求めるのが人間です。

お仕事でクリエイター業をやっていると、 お客さん側がどんどん「こんな機能を盛り込めないか？」って提案してくるんですよね。

それをずっと聞いてると完成しないんですよね。

挙句の果てに後から考えたらあの機能は別に要らなかったってなって 無駄な時間を費やしてしまう可能性も高いです。

なので最初に決めた設計からは基本的には増やさない方向性で 一旦完成させてから、追加で入れたい機能を盛り込んだ設計を考えて アップデートをするという手法をとったほうが完成に近づきます。

私も作っているうちにこの機能盛り込もうと考えガチなタイプなので 結局未完成のまま終わってしまったっていうことがいろんな製作で経験してきました。

なのでこのWordpressテーマはちゃんと完成させて、 アップデートしていっても破綻しないような作りにしていこうかなと思います。

コンテンツの位置をドラッグで変更できるようにするには

有料テーマによっては専用のページに行くと コンテンツの中身をドラッグで移動して入れ替えられるような直感的なテーマも存在しています。

Web制作に携わってないような人からするとめちゃくちゃ便利じゃん！ ってなると思うんですがあれを実装するのって結構骨が折れるんですよね。

そういうJavaScriptライブラリを使えばドラッグで移動させられる機能というのは 結構簡単に作れてしまうんですが、その結果を元に内部でソースコードを入れ替える処理を書かないといけません。

なので最初からそういう設計でソースコードを組んでいないと、 HTMLが破綻してしまって内部SEOの効果も落ちてしまいますし、 閉じタグがなかったり多かったりしてWebページとして破綻してしまう可能性が高くなります。

私も将来的にこの要素をアップデートで追加したいと思っているので、 最初から入れ替えられるようなHTMLを組んでいこうかなと思ってます。

──次回はWordpressの基本のテーマを作った後の話になります。

基本のテーマとは単純にWordpressデフォルトであるタイトルを表示したり 記事のループを作ったりと特にいじらなくてもWordpress基本機能をコードに盛り込んだだけのテーマです。

なので、このオリジナルテーマ作り講座では基本的にCSSとかの解説は基本的にしていくつもりはありません。

「ある程度制約をつけないと完成しないので注意」でも言ったとおり、 すべて対応していては終わらないのでまずは自分の中にあるものを終わらせて 需要があれば基礎テーマの１からの作り方みたいな感じでコーナーを組もうと思っては居ます。

そもそもカラムを作るために使うCSSで、floatを使おうがflexboxを使おうがgridを使おうが それはテーマを作る人の自由なので講座に盛り込むわけにはいかないなと感じました。

一応言っておくと私の場合は基本的にはnode.jsを使ってflexboxをメインとして組んでるscssをコンパイルし 動きとかはJavaScriptはES6以上で書いてES5にトランスパイルしてそれぞれをwebpackでminifyして容量を削減して htmlはpugで管理してwordpressに上げるときはphpに差し替えるといった いかにもWeb製作者っぽい感じでテーマの素を作ってます。

私はこんな複雑っぽい感じで作ってますが、やろうと思えばメモ帳オンリーで PHPもCSSも組めますからテーマそのもの自体は各自作ってください。

もちろん、テーマを作るためのWordpress専用関数の使い方なんかは 当ブログで記事として作っていくつもりです。

ただ、Wordpressのテーマの作り方なんてすでに色んな人が書いていると思いますので優先度は低めにして 私のやりたい「万人が使えるようなテーマの作り方」を主軸として記事を書いていきます。

過去にWordpressのテーマを作るための記事も書いてたりしますが、 きれいにまとまってなかったりするのでテーマが固まったら見やすく編集しなおしてみます。