考え、感じる、Web制作。

Web制作の学習や情報についての記事が中心です。

Wordpress 第6回

Wordpress第6回

今回は固定ページの追加を軸に進める。

固定ページの追加

ダッシュボードの固定ページでコンテンツ作成。html編集もこの画面上で可能。順序に数値をいれ表示順序を決める。この時点では実際の画面には反映しておらず、固定ページへのリンクは表示されない。

固定ページへのリンク表示

ダッシュボードの外観>ウィジェットでサイドバーへ追加設置する。

サイドバーを使わない固定ページへのリンク

index.phpにを直接書き込む。

ソース分割

固定ページとブログページでレイアウトを変えたいので、共通部分となるheaderやfooterは別ファイルで管理する。

header.php

index.phpのheaderより上をheader.phpに入れ込む。

  1. 空のheader.phpを作成
  2. index.phpの#headerの閉じタグまでを切り取る
  3. 切り取った箇所にと記述
  4. header.phpに切り取ったコードを貼り付ける
headerを複数使いたい場合

header-2と記述することで、複数のheaderを利用可能。この方法を使うと、トップページだけ大幅にレイアウトが違うページを作ることも可能である。

footer.php

footerも同様に、footer.phpを作成し、#footer以下をコピペ、切り取り箇所にを記述すればよい。

固定ページ

固定ページはpage.phpというファイル名で作る。ソースはひとまずindex.phpの内容をコピーアンドペーストし、余計なタグを除去すると容易である。div#contentに.pageを追加することでcssを個別に当てられる。

ナビゲーションバーの作成

固定ページへのリンクをナビゲーションバーにて実装する際の手順を記す。

function.php

function.phpに下記を追記。

register_nav_menus(array(
  'navigation'=>'ナビゲーションバー'
));
header.php

header.phpに下記を追記。

<div id="nav">
<?php wp_nav_menu(array('theme_location'=>'navigation'));?>
</div><!--#nav-->
ダッシュボードの操作
  1. 外観>メニューから項目や順序をカスタマイズする。
  2. ナビゲーションバーにチェック。
  3. 「メニューを保存」をクリック。
  4. cssを当てる。