【WordPress】1カラムの記事投稿用テンプレートを作成する方法

この記事をシェアする

スポンサードリンク

 

こんにちは、シロマ@mademodeです。

さて、このブログのテーマは絶賛制作中ですが、1カラムにするか2カラムにするか迷っています。

ということで、2カラム(デフォルト)とは別に1カラムの記事も作成できるように設定してみました。

実際、今回の記事は1カラムで表示させています。

ベースとなるsingle.phpを複製して、CSSを少しいじるだけで実装できます。

投稿用のテンプレートを作成する手順

まずベースとなるsingle.phpを複製して、ファイル名を「single-1column.php」とします。

「single-1column.php」ファイルの一番上に、以下の様なテンプレートの名前と種類を記述します。

<?php 
/**
* Template Name: 1カラム用
* Template Post Type: post
*/
?>

 

2カラムのブログであれば以下のような構造になっているでしょう。(実際はmainタグを使っていると思うけど)

※コードは一例です。

<div class="wrapper clearfix">
<div class="main"></div>
<div class="sidebar"></div>
</div>

 

クラス名を指定して、

<div class="wrapper single-column clearfix">
<div class="main"></div>
<div class="sidebar"></div>
</div>

 

CSSを軽くいじれば、1カラムになりますね。テーマによって細かい所は違うと思うので、それはうまくやって下さい。

/* 1カラム用 */
.wrapper.single-column {
width: auto;
max-width: 800px;
padding: 0 10px;
}
.single-column .main {
width: 100%;
float: none;
}
.single-column .sidebar {
width: 100%;
float: none;
}

 

投稿作成画面の右側でテンプレートを選択できるようになるので、ここで作成した1カラムのテンプレートを選択すれば1カラムになりますね。

管理画面

 

以上です。

記事の下に移動したサイドバーはもうちょっとどうにかしたいですね。

ちなみに投稿ページでテンプレートが使えるようになったのは、バージョン4.7以上からです!

スポンサードリンク

<【CSS】transform skewで背景を斜めに表示させる

新サイトを公開しました>

この記事をシェアする