WordPressテーマカスタマイザーにカラム設定を追加する方法。Fantastech(ファンタステック)Fantastech!!WordPressGoogleアドセンスSEO対策サイトマップお仕事のご依頼WordPressテーマカスタマイザーにカラム設定を追加する方法。シェフWordPressテーマの中には、テーマカスタマイザー(外観→カスタマイズ)でカラムを切り替えできるものがあります。2カラムでサイドバーを右に2カラムでサイドバーを左に1カラムでサイドバーを非表示と、ボタンをクリックするだけでサイトのレイアウトが変更できるので、プログラミングが一切わからない方にも直感的にカスタマイズをしてもらうことが可能です。今回は、そのカラムの切り替え機能をテーマカスタマイザーに追加する方法をご紹介します。目次1基本知識2カスタマイズの流れ3テーマカスタマイザーにカラム切り替え機能を追加4body要素にテーマカスタマイザーの設定値を読み込み5スタイルシートにcssを追加61カラムにする場合7まとめ基本知識テーマカスタマイザーを拡張する上で必要な知識や考え方は下記記事にまとめているので、まずは一度チェックしてみましょう。見るカスタマイズの流れ今回の流れをざっくりと説明すると、下記のようになります。テーマカスタマイザーに設定項目を追加(functions.php)1の設定をheader.phpのbody要素に「id」や「class」として追加2のidやclass別のcssをスタイルシートに追加つまり、body要素のid名やクラス名によって、適用されるcssが変わるという仕組みです。body要素ではなく、main要素や#wrapperなどに適用してもOKですし、やり方はいくつかあります。テーマカスタマイザーにカラム切り替え機能を追加こちらがサンプルコードです。=>'サイトのレイアウトを変更できます。);}※なぜこのコードになるかは、先述のテーマカスタマイザーの拡張方法についての記事を見ればわかるので割愛します。body要素にテーマカスタマイザーの設定値を読み込みテーマカスタマイザーで設定した値(ラジオボタンで選択した文字列)を、body要素にクラス名として追加します。?>">デフォルトのクラス名は「left-content」になり、その他のラジオボタンをクリックすると、それに応じてクラス名が変わります。スタイルシートにcssを追加ここからは、サイトのデザインによってコードがガラッと変わるので、「コピペでOK!」とはいきませんが、サンプルコードをご紹介します。300px;}}コードを見て「あ!なるほど!」と思うはずですが、id名やクラス名別に、「float」や「margin」「padding」の値を変えています。デフォルトのレイアウトが「コンテンツが左で、サイドバーが右」の場合、コンテンツに「margin-right:-300px」を指定(右の余白にマイナスの値を指定し、300px分の隙間を作る)サイドバーに「float:right」と「width:300px」を指定(300px分の隙間に幅300pxのサイドバーを入れる)となります。「コンテンツが右で、サイドバーが左」というレイアウトにする場合、body要素に「right-content」というクラス名が付いた時のcssを指定すればOKということになります。【説明】左の余白にマイナスの値を指定し、300px分の隙間を作り、デフォルトで設定している右のマイナスの余白を消す1カラムにする場合1カラムにする場合も考え方は同じです。body要素のクラス名が「center-content」だった場合に、コンテンツに「margjn:0」を指定(余白を作らない)サイドバーを非表示にするとすれば、1カラムになりますね。「display:none」でサイドバーを非表示にしてもいいですが、もっとスマートな方法があります。?>これは、テーマカスタマイザーの設定値がcenter-content(1カラムにするクラス)以外だったらサイドバーを表示するという条件分岐です。これで、1カラム以外のレイアウトの時はサイドバーがそもそも読み込まれません。サイドバー以外でも応用がきくテクニックなので、色々試してみてはいかがでしょうか?まとめテーマカスタマイザーを拡張する前は、「すごく難しいことをやっている」と思っていましたが、今回ご紹介したように、やっていることはかなり簡単です。́)ゞカテゴリー:カスタマイズシェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。上に表示された文字を入力してください。「ページを開けません。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。