0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-17

自己紹介

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

functions.phpの編集

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

functions.php
<?php

add_theme_support('menus');

と記述することで管理画面からメニューを編集できるようになるみたいです。
そして、この一文を加えるだけで管理画面(ダッシュボード)の外観にメニューというものが追加されるようですね。
themesconfig.png

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

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

kotei.png
更にここから固定ページを追加します。

tohome.png
そしてここからホームへのリンクを追加。

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

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
ハイ。失敗してます。
先程追加したメニューはプロフィールホームのはず…
ですが、表示させてみるとプロフィールだけ。しかもホームが見当たりません…
どこで間違ったのか探っていきます。。。

markup.png

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

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

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

header.php
<?php wp_head(); ?>

と追記しましょうとありましたので追記するとします。
どうやらこれがないと動かないプラグインなんかがあるみたいですね。

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

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

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?