HTMLとCSSで作成したホームページをWordPressに落とし込む

WordPressをインストールした後、

①C:\xampp\htdocs\wordpress\wp-content\themes\自分で作成したフォルダ
の中に自分で作成したHTMLとCSSを置く。

②この状態ではWordPress上では表示できないので
index.phpとstyle.cssを用意する。

テンプレートを分割する

index.phpをheader.phpとfooter.phpとsidebar.phpに分割する。

①空のheader.phpとfooter.phpとsidebar.phpを新規作成する。
header、footerは基本は変わらないので共通化したいところまでコピーすればよい。
（例えばheaderタグに囲ってなくても問題なし）

②コピーし終わったらindex.php上部(切り取りした部分)に<?php get_header(); ?>を追記して分割したheader.phpを読み込む設定をします。

③同じくindex.phpの最終行(切り取りした部分)に<?php get_footer(); ?>を追記して分割したfooter.phpを読み込む設定をします。

④sidebar.phpは私のホームページにはないので空の状態にしておく。
もしある場合はその部分をコピーしてindex.phpの切り取った部分に
<?php get_sidebar(); ?>追記して読み込みを設定する。

他のテンプレートを作成するには

single.php：投稿用のテンプレート
page.php：固定ページ用のテンプレート
search.php：検索結果用のテンプレート

※まだ他にもたくさんあるらしいです。

状況に合わせて作成する。

テンプレートの主な優先順位

テンプレートには「優先順位」がある。
優先度の高いテンプレートが優先的に使われるらしいです。
最初に作成したindex.phpは他に優先順位の高いテンプレートがないときに
最終的に適用される汎用テンプレートです。（優先順位が高くないらしい）

トップページでは一番優先順位が高いのはfront-page.phpなので
front-page.phpを新規作成してindex.phpの中身を移す。

トップページ（フロントページ）の設定

①WordPress側で固定ページで新規追加をする。
②タイトルの名前に「トップページ」といれる。
（トップページとわかれば何でも良い）
③公開する
（この段階でプレビューをしてもpage.phpをみにいってしまう）
④WordPress側で「設定」→「表示設定」で
👇のように設定し変更保存をする

⑤再度、固定ページで「トップページ」をプレビューするとfront-page.phpを見に行くようになる。

トップページをカスタイマイズできるようにする

※今回は店舗情報の部分をWordPress側で簡単に操作できるようにする
営業時間、定休日、カードを順番を変えることができるようにする。

①WordPress側のプラグインのインストールを行う
②新規追加をして検索バーでSmart Custom Fieldsをみつけ
インストールし、有効にする。
③設定の下にSmart Custom Fieldsが確認できる。
④Smart Custom Fieldsの新規追加をクリック
⑤タイトル名を「情報」とする。
⑥新規追加を押してフィールドの追加を押す。
⑦繰り返しのスイッチがあるので押すとグループ名がでるので記載する。
グループ名はstoreinfo
⑧👇のように記載する。

⑨固定ページ一覧のトップページ→編集をクリックする。
⑩先ほど⑤で入力した情報が追加されて、項目と内容に必要な情報を記載する。
私の場合は

項目：「営業時間」
内容：「PM 6:00～（お客様の状況）」

項目：定休日
内容：火曜日

項目：カード
内容：JCB・VISA・マスター・DC・UC・NICOS

※新しく追加する場合は＋ボタンを押す。

front-page.phpにコードを記載する

先ほどSmart Custom Fieldsdで作成したグループ名を呼び出す

$storeinfo = SCF::get('storeinfo');

👇のコードをうちデータがどのように出力されてるか確認してみる

echo "<pre>";
var_dump($storeinfo);
echo "<pre>";

array(5) {
[0]=>
array(2) {
["title"]=>
string(6) "住所"
["content"]=>
string(48) "〒395-0002 長野県飯田市上郷飯沼2640-1"
}
[1]=>
array(2) {
["title"]=>
string(3) "TEL"
["content"]=>
string(12) "0265-23-4475"
}
[2]=>
array(2) {
["title"]=>
string(12) "営業時間"
["content"]=>
string(34) "PM 6:00～（お客様の状況）"
}
[3]=>
array(2) {
["title"]=>
string(9) "定休日"
["content"]=>
string(9) "火曜日"
}
[4]=>
array(2) {
["title"]=> string(9) "カード"
["content"]=>
string(42) "CB・VISA・マスター・DC・UC・NICOS" }
}

foreachを使って処理をする

②出力したい場所でコードを記載する。

<dl>
  <dt>営業時間</dt>
  <dd>PM 6:00～（お客様の状況）</dd>
  <dt>定休日</dt>
  <dd>火曜日</dd>
  <dt>カード</dt>
  <dd>JCB・VISA・マスター・DC・UC・NICOS</dd>
 </dl>

👇のように変更する。

<dl>
  <?php foreach ($storeinfo as $value): ?>
    <dt><?php echo $value['title'];?></dt>
    <dd><?php echo $value['content'];?></dd>
  <?php endforeach;?>
</dl>

出力しても見た目はまったく変わってないが、
固定ページのトップページ→編集で
ドラッグアンドドロップで順番をかえることができる。
👇結果カードの項目を上にすることが簡単にできました。

※新しく増やすことも可能です。

メニューバーを作成する

WordPressの管理画面には自由にメニューを編集できる「ナビゲーションメニュー」
という機能が用意されている。
外観＞メニューから設定できますが、初期状態はOFF状態で表示されていません。
👇

functions.phpを新規作成し、
下記のようにwebst8_setup()関数の中に、add_theme_support( ‘menus’)で、
メニュー機能を有効化する。
👇

<?php 
function webst8_setup() {
  //関数の中身を記述
  add_theme_support('post-thumbnails'); //アイキャッチ画像をON
  add_theme_support('menus'); //メニュー機能ON
}
add_action('after_setup_theme' , 'webst8_setup');
//最後に作成したafter_setup_themeアクションフック※に登録します。
?>

機能が有効になると
👇メニューが追加される。

固定ページで「メニュー」「こだわり」「お問い合わせ」のページを作成する。

管理画面の「外観」の中に「メニュー」という項目が表示されるようになる。

「main-manu」という名称でメニューを新規作成する。
メニュー項目追加で先ほど固定ページで作成したメニュー表示されるので
必要なメニュー項目をチェックしてメニュー追加ボタンを押す。
👇のようになる。

私の場合はメニューバーの表示があるのはheader.phpなので、header.phpのグローバルナビゲーションの箇所を修正する。
👇のようにheader.phpをする。

修正前のコード

<div class="menu">
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li><a href="menu.html">メニュー</a></li>
    <li><a href="concept.html">こだわり</a></li>
    <li><a href="contact.php">お問い合わせ</a></li>
  </ul>
</div>

修正前のブラウザ上

修正後のコード

<div class="menu">
<?php 
$args = array(
'menu_class' => 'menu' , 'container' => false );
wp_nav_menu($args);   
?>
</div>

修正後のブラウザ上

先ほどメニューの項目で作成されたのがそのまま出力される。
これでメニュー名も場所も自由にカスタマイズできる。
👇こんな感じ

※他にも色々カスタマイズできるようにる。