BizVektorで1カラムのランディングページの作り方
かなり苦労したのですが、とても良いサイトがありました。
WordPressサイトに1カラムのランディングページを含める方法
記事ごとに設定する
pageのidを指定して、1カラムのテンプレートを指定する方法です。そして、文字のサイズ指定と、
中央寄せまで指定して、ランディングページが出来上がります。
page-idの調べ方
もしくはクイック編集をクリックすると右上に表示されます。
1 2 3 4 5 6 7 8 9 10 11 | /* BizVektorのヘッダー・フッター・サイドバーを非表示に */ .page-id-167 #headerTop, .page-id-167 #header, .page-id-167 #gMenu, .page-id-167 #pageTitBnr, .page-id-167 #panList, .page-id-167 #back-top, .page-id-167 #footerSection, .page-id-167 #main #container #sideTower { display: none; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* ランディングページのフォントを設定 */ .page-id-167 { font-size:30px; font-weight:bold; } /* コンテンツエリアを中央寄せに */ .page-id-167 #main #container #content { margin: 0 auto; float: none; width: auto; text-align: center; } |
cssカスタマイズ
これを「外観」→「cssカスタマイズ」を開いて、追記するだけです!
しかしこれでは、たくさん作るのが大変なので、スタイルシートを別けたい!
そう思っていたら、
スタイルシートかテンプレートで別けたい
しかしこれでは、たくさん作るのが大変なので、スタイルシートを別けたい!
そう思っていたら
固定ページのテンプレートで「サイドバーなし」をコピー
はかにもサイドバーなしを使う時が来るかもしれないので、コピーしてランディングページ専用にしましょう。
ダウンロードして、メモ帳もしくは、terapadで開きます。
そしてトップを書き換えます。
1 2 3 4 5 | <?php /* * Template Name: No sidebarランディングページ */ get_header(); ?> |
これだけです。あとは保存して、アップロード!
名前を付けて保存「page-no-side-landing」
同じ名前なら、以下のコードもそのままコピペできます!
phpファイルです。
ちなみに、terapadで保存するときは「UTF-8N」です。
『UTF-8とUTF-8Nの違いは、UTF-8がBOMあり、UTF-8Nはありません。』
BOMなしだそうです。
同じ名前なら、以下のコードもそのままコピペできます!
固定ページのテンプレートに表示されます。
それを選んでページを作成します。
そのままだと、ただの固定ページなので、
ランディングページのcssカスタマイズ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | @media (min-width: 970px) { /*1カラム幅*/ .page-template-page-no-side-landing #main #container { width:800px; } } /*1カラムヘッダー部なし*/ .page-template-page-no-side-landing #headerTop, .page-template-page-no-side-landing #header, .page-template-page-no-side-landing #gMenu { display: none; } /*1カラム ページタイトルなし*/ .page-template-page-no-side-landing #pageTitBnr{ display:none; } /*1カラム パンくずリストなし*/ .page-template-page-no-side-landing #panList{ display:none; } /*1カラムフッターなし*/ .page-template-page-no-side-landing #headerTop, .page-template-page-no-side-landing #footerSection, .page-template-page-no-side-landing #mainFootContact { display: none; } /* ランディングページのフォントを設定 */ .page-template-page-no-side-landing { font-size:20px; font-weight:bold; } /* コンテンツエリアを中央寄せに */ .page-template-page-no-side-landing #main #container #content { margin: 0 auto; float: none; width: auto; text-align: center; } |
ランディングページサンプル作成
ネット販売するには、特定商取引法の表記も必要になるので、
同じくランディングページで作成します。
これで、安心!と思いきや、他のページでフッターのサイトマップに表示されます。
サイトマップから削除、bizvektorテンプレート
「外観」→「高度な設定」から
ここに、記事のidをカンマ「,」で区切って入れてくさい!
これで、完全なランディングページが量産できます!
ところが、Table Of Contents Plus プラグインを入れていて見出しタグを使うと、
目次が生成されます。
目次があっても面白いとは思いますが、念のため消します。
Table Of Contents Plusで任意のページで目次の消し方
・目次を表示させたくない場合
1 [no_toc]記事中、任意の場所に、ショートコードを記入
だけです。
これで、たくさん商品ページが作れますね!