[サイト作り] [WordPress] 本文をカラムでレイアウト

ページで、WPウェブを構築する時に、使いようによっては便利そうなので備忘録。

投稿やページの本文内をカラム付けし、本文をレイアウトできる。

文章を3列にしたり、上段と下段をフルwidthで、間を2列にしたり

などなど

(divとCSSで出来る事ではあるのですが)

single.php, page.phpを開き、エントリー部分に、次のコードを追加する。

その際、本文を表示させる the_content(); を消しておく必要がありますので、カラムレイアウト用にsingle2.php, page2.php(ページテンプレート)などで保存するのをおすすめします。

div class=”entry”(本文の箇所)に

<?php
$page_columns = explode("[--column--]", $post->post_content);
print $page_columns[0];
print '<div class="column-1">';
print $page_columns[1];
print '</div>';
print'<div class="column-2">';
print $page_columns[2];
print '</div>';
print '<div class="column-3">';
print $page_columns[3];
print '</div>';
print '<div class="column-4">';
print $page_columns[4];
print '</div>';
print '<div class="column-5">';
print $page_columns[5];
print '</div>';
print '<div class="column-6">';
print $page_columns[6];
print '</div>';
?>

///カラムが2だけでいいなら、必要の無い箇所を消してよい。

投稿/ページ新規作成で、次のように作成し、保存

[--column--]
ここにカラム1の内容

[--column--]
ここにカラム2

[--column--]
ここにカラム3の内容

[--column--]
ここにカラム4の内容

[--column--]
ここにカラム5の内容

[--column--]
ここにカラム6の内容

あとはCSSに、それぞれのスタイルを追加する。

.column-1{}
.column-2{}
….////

複数のページテンプｒ－トを用意して、それぞれにレイアウトを変えたい場合は、スタイルの部分を変更。

サンプル　page2.php
print '<div class="column-1">';
print $page_columns[1];

サンプル　page3.php
print '<div class="columntype2-1">';
print $page_columns[1];

こんな感じです。

Did you like this? Share it:

PR

『カレー好きのあなたに！送料無料！1000円コミコミお試しセット讃岐カレーうどん4玉セット【smtb...』を見る [楽天] http://a.r10.to/hCYv2Y <

関連してるかも

  • 2009年9月21日 -- [WordPress head内] wp_head();のWordPressバージョンを消す
    meta name="generator" content="WordPress x.x.x" を消すには、head内に直接コードが書かれていればそこを消すだけですが wp_head();から吐き出されるWordPressバージョンを消すには functions.phpに、次のコードを追加する。 ...
  • 2009年9月20日 -- [WordPress head内] ページテンプレートごとにCSSを読み込む
    ページでWPウェブを構築する際に便利そうなので備忘録 ページごとにテンプレートを変更して、それぞれに応じたCSSを使用する 例えば、以下の構成で作る場合 「page.php」　デフォルトのページテンプｒ－ト 「page.css」　page.phpのレイアウト用CSS 「nosidebar.php」　サイドバーを外したテンプｒ－ト 「nosidebar.css」　nosidebar.phpの...
  • 2009年9月19日 -- [WordPress] テンプレートをカテゴリーごとに変更(単一ページ)
    シングルページのテンプレートを、カテゴリーごとに変更したい時 用例 ・category-Aは、両サイドバーにする ・category-Bは、サイドバーをなくす ・category-Cは、文章だけなのでエントリー幅を見やすく ・逆にcategory-Dは、画像が多いのでエントリー幅を広く などと、色々と遊べそうです。 １、single.phpを開く ２、以下のコードを書き保存 ...
  • 2009年9月18日 -- [WordPress] テンプレートをカテゴリーごとに変更(カテゴリーページ)
    カテゴリーページのテンプレートを、カテゴリーごとに変更したい時 用例 ・category-Aは、両サイドバーにする ・category-Bは、サイドバーをなくす ・category-Cは、記事一覧をタイトルのみにする などと、色々と遊べそうです。 １、category.phpを開く category.phpが無い人は新規に作成 ２、以下のコードを書き保存 カテゴリーID5の時は...
  • 2009年9月14日 -- [WordPress] bodyを、ページごとにbody id="xxx"に変更
    トップページや、シングルページごとに"body id"を振り分ける。 WPブログではあまりページごとにスタイル変更する必要もないですが WPウェブを構築する場合は、ページごとにスタイルを変更できるとなにかと便利です？ もっと、シンプルに出来るとは思うのですが、phpをよく理解してないのでこれが限界です。 変更箇所 header.phpの＜body＞ 変更後 トップページ body ...
  • 2009年9月12日 -- [wordPress] category_description カテゴリーページにカテゴリ説明表示
    カテゴリー管理で入力した、カテゴリーの説明を、カテゴリーアーカイブページにアクセスしたときに表示させる。 archive.php(category.php)を開き、説明を表示させたいとこにコードを ...
  • 2009年11月1日 -- [WordPress] カテゴリーリストを2列にする。
    幅広なサイドバーやフッターにカテゴリーリストを表示する時に２列にすると見た目的に 参考：英語サイト 10 WordPress Hacks to Make your Life even Easier 「Breaking Categories into Columns」の部分 スタイルシートに .right {float:left; width:140px;} .le...
  • 2009年10月1日 -- [WordPress] トップページの新着記事のタイトルなどを変更
    トップページの記事一覧の新着投稿のポストタイトルのスタイルを変更 ソース： 英語サイトのどこか(忘れました･･･) index.phpを開いて、div class post と div class entry の間に次のコードを入れる。(ポストタイトルの部分) ...
  • 2009年9月29日 -- [WordPress] バナーなどをランダム表示
    ヘッダー画像をランダム表示するハックを応用して、ページのリロード時にバナーなどをランダム表示 参考ハック How to: Display a random header image バナーを表示させたい場所に次のコードを貼る バナー　A バナー　B バナー　C バナー　D バナー　E バナー　F バナー　G ran...
  • 2009年9月29日 -- [WordPress] シングルページにパンくずリスト
    このブログはパンくずを置くたけの広さがないので今後のための備忘録 サブカテゴリーを設置してないなら次のコードで十分です。 single.phpのリストを表示させたい場所に ...

Post in サイト作り //