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

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

## 作ったデザインをテーマに変換しましょう
作ったデザインをテーマに変換するためにはまず**workpress\wp-content\themes**の中にフォルダを移動します。
ちょっと名前がわかりづらいのでフォルダ名を**uka_themes**に変更する事にしました。
WordPressはPHPベースで動作するので**index.html**を**index.php**に変更します。

CSSにはヘッダー情報を入れないといけないらしいので、[コチラ](https://codex.wordpress.org/Theme_Development)から

```css:codex
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
```
をCSSファイルの一番上部にコピペして、自身の情報を入れ込んでいきます。

一部入れなくても大丈夫な情報(なんでなのかは後で調べようと思いますが…)
今回はこの様に編集してみました。

```css:codex
/*
Theme Name: uka_themes
Theme URI: http://ukkari-ukachan.sakura.ne.jp/ukkari/
Author: ukkari-ukachan
Author URI: http://ukkari-ukachan.sakura.ne.jp/ukkari/
Description: ukachan, ukkari, ukkari-ukachan
Version: 1.0
*/
```
こうすると管理画面のテーマから自作テーマを選択できるようになっている。との事。
![brokenThemes.png](https://qiita-image-store.s3.amazonaws.com/0/155272/6444e105-4610-0e20-b81a-cea662367923.png)
な！で、できていない。。。

なぜ！？と、思ったら最初に書いた**index.html**を**index.php**に変更するのを忘れていただけでしたｗ
やっぱりウッカリですね！
トンデモないハマりにあってしまいそうなので気を付けないとですね！
![saccessThemes.png](https://qiita-image-store.s3.amazonaws.com/0/155272/5d4da964-5ca3-12a9-6fd4-fbbce326a4e2.png)

ひとまずうまくいったのでコイツを有効化します。

と、これでは作ったテーマがうまく反映されていないようなのでここからさらに設定が必要なようです。
ひとまずは、先程作ったスタイルがあたっていないようなので修正していきます。

どうやら、ヘッダーやらフッターやらページは分割しないといけないようです。
そういうことですね。
いままで作ってきたテーマの元は本当に元であってそれだけでは完成しないってことですね！

## ファイルを分割しよう！
まずはスタイルの設定も含まれているファイル**header.php**、**footer.php**、**sidebar.php**、そして動作に関するファイル**functions.php**を作ります。
まずは**header.php**に**index.php**の

```html:header.php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Ukachan's Blog</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="./style.css">
    	<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="">Ukachan's Blog</a></h1>
            <ul class="menu">
                <li><a href="">menu1</a></li>
                <li><a href="">menu2</a></li>
                <li><a href="">menu3</a></li>
                <li><a href="">menu4</a></li>
            </ul>
        </div><!-- header -->
```
この部分を切り取って渡します。そして**index.php**では先程切り取った部分の代わりに

```php
<?php get_header(); ?>
```
を記述します。そうすると**index.php**が読み込まれる時に**header.php**から情報を読み込んでくれるそうです。

続いて**sidebar.php**にこちらの部分を切り取って渡します。

```php:sidebar.php
            <div id="sidebar">
                <div class="widget">
                    <h3></h3>
                    <ul>
                        <li><a href="">item</a></li>
                        <li><a href="">item</a></li>
                        <li><a href="">item</a></li>
                        <li><a href="">item</a></li>
                        <li><a href="">item</a></li>
                    </ul>
                </div>
            </div>
```
そして、そもそも記述する場所を間違っていた気はしますが…**index.php**の**id=posts**の下に

```php
<?php get_sidebar(); ?>
```
コチラをsidebarの代わりに記述します。
そして同じ要領で**index.php**からfooter部分を切り取り**footer.php**に貼り付け

```php:footer.php
        <div id="footer" class="conteiner">
            footer
        </div><!-- footer -->
    </body>
</html>
```
footerの代わりに**index.php**のfooterがあった場所に

```php
<?php get_footer(); ?>
```
最終的に**index.php**はこんな形になりました。

```php:index.php
<?php get_header(); ?>
        <div id="main" class="conteiner">
            <div id="posts">
                <div class="post">
                    <div class="post-header">
                        <h2>
                            <a href="">title</a>
                        </h2>
                        <div classa="post-meta">
                            20xx年x月x日【category】
                        </div>
                    </div>
                    <div class="post-content">
                        <div class="post-image">
                            <img src="img/noimage.png" width="100" height="100">
                        </div>
                        <div class="post-body">
                            <p>本文</p>
                        </div>
                    </div>
                </div><!-- post -->
                <div class="navigation">
                    <div class="prev">prev</div>
                    <div class="next">next</div>
                </div>
            </div><!-- posts -->
            <?php get_sidebar(); ?>
        </div><!-- main -->
<?php get_footer(); ?>
```

この**get_header**、**get_sidebar**、**get_footer**などはWordPress側で用意された関数の様ですね。

## スタイルの設定をしよう
ファイルの分割が終わったところで**header.php**の情報を修正してスタイルの設定をしていきましょう。

```php:header.php
        <link rel="stylesheet" type="text/css" href="./style.css">
```
この部分の**href**を

```php:header.php
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
```
と変更します。先程までの**getなんたら**と同じ要領ですね。

## titleの設定をしよう
まだ画像は反映されておりませんがとりあえずスタイルがうまくあたったところでタイトルの設定をしていきます。
**index.php**の**head**部分の**title**部分を変更します。

```php:header.php
        <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
```
ドットインストールさんによると詳しい説明は省いているようですが、
**bloginfo('name')**の指定はブログのタイトルを**h１**タグで囲んで表示させるものみたいですね。
**<?php wp_title(); ?>**と、パラメータを指定せずに呼び出した場合は投稿タイトルがそのまま反映されるようですね。
今回はパラメータ第１引数に'|'を指定して区切り文字を|にしています。第２引数に真偽値trueを入れることによりタイトルを表示させています。第３引数に'right'を指定することにより第１引数の右側に第１引数として指定した文字列を入れる様ですね。
つまりこの指定方法だとブログの名前が**ukachan's Blog**で投稿記事の名前が**はじめまして**だった場合に**はじめまして|ukachan's Blog**となる。ということなんですかね。

## header.phpが”概ね”完成
**header.php**の**h１**の部分つまりブログタイトルの部分ですね。この部分を設定するのは先程のtitleの設定でやったように

```html:header.php
            <h1><a href="">Ukachan's Blog</a></h1>
```
ここを

```php:header.php
            <!--<h1><a href=""><?php bloginfo('name'); ?></a></h1>-->
```
とすればOKの様ですね。
そして、リンク部分もphpで編集。

```php:header.php
            <!--<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>-->
```
とこれでheader.phpが概ね完成した模様です。
次回は**functions.php**に記述してmenuを編集して行きます。


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