プログラミング初心者、WordPress始めます！その５

## 自己紹介
プログラミング初心者です。
使用OSは主にwindows、開発環境はxamppでローカルサーバーを立ち上げての作業になります。
HTML少々、CSS少々、JavaScript少々、PHP少々。と、どれも少々です。
そんな私ですが、とりあえずものにしたいと思い手を付けたのが**WordPress**
プログラミング超初心者なのでプログラミングを理解している方たちが説明しているサイトの説明の理解に苦しむことがありますｗ
僕と同じように超初心者の方が始めるときにほんの少しだけでも参考になれば幸いです。
お勉強のメインはドットインストールさんの動画を基点にネット検索などで行っていこうかと思っております。
超々初心者なので間違った情報等ありましたら優しく教えていただけると嬉しいです。

## functions.phpの編集
前回お話したmenuですが、こちらは管理画面からカスタマイズできるように**functions.php**から編集するのが良いみたいですね。

```php:functions.php
<?php

add_theme_support('menus');
```
と記述することで管理画面からメニューを編集できるようになるみたいです。
そして、この一文を加えるだけで管理画面(ダッシュボード)の外観に**メニュー**というものが追加されるようですね。
![themesconfig.png](https://qiita-image-store.s3.amazonaws.com/0/155272/87f5ec41-cd5f-5465-6d98-321ac889b0f9.png)


そして、ここからは管理画面から編集できるようなので実際にやってみます。

**メニュー**から入ると赤枠で囲っている所にメニュー名を入力できるのでそこからメニュー名を入れていきます。
今回は**uka_menu**という名前にします。


![kotei.png](https://qiita-image-store.s3.amazonaws.com/0/155272/eb4703bb-40bf-d170-a65a-99b9a6d9c4f9.png)
更にここから固定ページを追加します。


![tohome.png](https://qiita-image-store.s3.amazonaws.com/0/155272/102bd1f0-03e9-7c28-f320-2dfa8460aee2.png)
そしてここからホームへのリンクを追加。

と、ここでひとまず画面右のメニュー保存を押すと操作したものが追加されます。
そしてこれをテーマに反映させるためには**header.php**の**menu**として記述していたhtmlを編集します。

```php:header.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
    	<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="header" class="conteiner">
            <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
            <ul class="menu">
                <?php wp_nav_menu(); ?>
            </ul>
        </div><!-- header -->
```
これで今までは**menu1**とか**menu2**とかしか表示されていなかったメニューに先程管理画面から追加したメニューが追加されているそうですね。
どうでしょう？表示を確認してみます。
![menu1.png](https://qiita-image-store.s3.amazonaws.com/0/155272/dd27b53f-b9ae-0691-f9f8-88d465354a4d.png)
ハイ。失敗してます。
先程追加したメニューは**プロフィール**と**ホーム**のはず…
ですが、表示させてみると**プロフィール**だけ。しかも**ホーム**が見当たりません…
どこで間違ったのか探っていきます。。。

![markup.png](https://qiita-image-store.s3.amazonaws.com/0/155272/4918bea2-63ef-2757-253c-507615486c04.png)

これを見るとどうやらマークアップが間違っているっぽいですね。

```php:header.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
    	<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="header" class="conteiner">
            <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
            <?php wp_nav_menu(); ?>
        </div><!-- header -->
```
そうですね。またやらかしていました。。。
そもそも**menu**用に作ったphpだったのに**ul**をそのまま残してしまっていましたね。
更に先程の管理画面から追加したメニューを保存するのを忘れていました。
いやはやこんなにウッカリでいいのか⁉と思ってしまうくらいウッカリしまくりで情けないです(´;ω;｀)
ということでひとまずメニューの追加はうまくいきました。
![menu2.png](https://qiita-image-store.s3.amazonaws.com/0/155272/1b979da1-b12b-542d-72a8-3891bb87fca9.png)


うまくいったところでドットインストールさんによると**header.php**には必ず

```php:header.php
<?php wp_head(); ?>
```
と追記しましょうとありましたので追記するとします。
どうやらこれがないと動かないプラグインなんかがあるみたいですね。

と、今日は完全に僕のウッカリによるものでしたがハマりが多かったので続きのサイドバーの編集はまた次にしようかと思います。


[<<プログラミング初心者、WordPress始めます！その４](http://qiita.com/ukkari_ukachan/items/eda37ccf5b2569f12c9f)
[プログラミング初心者、WordPress始めます！その６>>]
(http://qiita.com/ukkari_ukachan/items/4eb1622517d1b420d52e)