初心者が月10万稼ぐ為の記録８　WordPressでHPをカスタイマイズ

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側で**「設定」→「表示設定」**で
👇のように設定し変更保存をする
![wp_hp1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/309ba18a-b096-da88-ffc4-dd31fe9c3ff6.png)
⑤再度、固定ページで「トップページ」をプレビューするとfront-page.phpを見に行くようになる。

#トップページをカスタイマイズできるようにする
※今回は店舗情報の部分をWordPress側で簡単に操作できるようにする
**営業時間、定休日、カードを順番を変えることができるようにする。**
![wp_hp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/d3dd5777-1d46-fb6f-cf3a-5cdd01860d6e.png)

①WordPress側のプラグインのインストールを行う
②新規追加をして検索バーで**Smart Custom Fields**をみつけ
インストールし、有効にする。
③設定の下に**Smart Custom Fields**が確認できる。
④Smart Custom Fieldsの新規追加をクリック
⑤タイトル名を「情報」とする。
⑥新規追加を押してフィールドの追加を押す。
⑦**繰り返し**のスイッチがあるので押すと**グループ名**がでるので記載する。
グループ名は**storeinfo**
⑧👇のように記載する。
![wp_hp3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/1c925112-3bd1-f9d3-ac82-64e08bc980a6.png)
⑨固定ページ一覧のトップページ→編集をクリックする。
⑩先ほど⑤で入力した**情報**が追加されて、**項目**と**内容**に必要な情報を記載する。
私の場合は

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

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

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

**※新しく追加する場合は＋ボタンを押す。**
#front-page.phpにコードを記載する

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

```php
$storeinfo = SCF::get('storeinfo');
```
👇のコードをうちデータがどのように出力されてるか確認してみる

```php
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を使って処理をする
②出力したい場所でコードを記載する。

```php
<dl>
  <dt>営業時間</dt>
  <dd>PM 6:00～（お客様の状況）</dd>
  <dt>定休日</dt>
  <dd>火曜日</dd>
  <dt>カード</dt>
  <dd>JCB・VISA・マスター・DC・UC・NICOS</dd>
 </dl>
```
👇のように変更する。


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

出力しても見た目はまったく変わってないが、
固定ページのトップページ→編集で
ドラッグアンドドロップで順番をかえることができる。
👇結果カードの項目を上にすることが簡単にできました。
![wp_hp5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/975d54bb-a2e7-2b0e-4214-de928e1f7f59.png)
※新しく増やすことも可能です。

#メニューバーを作成する
WordPressの管理画面には自由にメニューを編集できる「ナビゲーションメニュー」
という機能が用意されている。
外観＞メニューから設定できますが、初期状態はOFF状態で表示されていません。
👇
![wp_hp6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/e11e1674-02c8-e761-1ab3-ea09143bd7a3.png)

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

```php
<?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アクションフック※に登録します。
?>
```
機能が有効になると
👇メニューが追加される。
![wp_hp7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/59b7fb5c-1f51-76a6-9861-61cd1c346f1d.png)

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

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

「main-manu」という名称でメニューを新規作成する。
メニュー項目追加で先ほど固定ページで作成したメニュー表示されるので
必要なメニュー項目をチェックしてメニュー追加ボタンを押す。
👇のようになる。
![wp_hp8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/953786b2-2c82-25e6-a211-313bb5516fda.png)

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

**修正前のコード**

```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>
```
**修正前のブラウザ上**
![wp_hp9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/25ab7006-1e22-1576-9879-cee1661221f1.png)


**修正後のコード**

```php
<div class="menu">
<?php 
$args = array(
'menu_class' => 'menu' , 'container' => false );
wp_nav_menu($args);   
?>
</div>
```
**修正後のブラウザ上**
![wp_hp10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/72a345ba-1093-66c2-8fd1-0d2d9c1e095b.png)

先ほどメニューの項目で作成されたのがそのまま出力される。
これでメニュー名も場所も自由にカスタマイズできる。
👇こんな感じ
![wp_hp11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/7d51b973-f50c-c5b8-1178-c575f08e01fc.png)

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