【初心者向け】WordPressでコーポレートサイトを作る2

この記事はWordPress自体触ったことない人を対象に、1からコーポレートサイトを作れるまでになるよう解説していきたいと思います。

WordPressというのは基本的にはブログ用なのですが、コーポレートサイトでも多く採用されていますよね。
この記事ではブログではなくコーポレートサイトを作る用途での使い方を解説したいと思います。

今回は第二回ということで実際にコードを書いていって覚えていきましょう。

パート1はこちら↓（WordPressのテスト環境構築と、どこを編集すればいいのかの紹介）

【初心者向け】WordPressでコーポレートサイトを作ろう1

この記事はWordPress自体触ったことない人を対象に、1からコーポレートサイトを作れるまでになるよう解説していきたいと思います。WordPressというのは基本的にはブログ用なのですが、コーポレートサイトでも多く採用されていま...

こんなひとを想定して書きます
実際にコードを書いてみよう

こんなひとを想定して書きます

WordPressは完全に初心者だ
ブログではなくコーポレートサイトを作りたい
プログラマーではない
HTMLやCSSはできる（デザイナーorコーダー）
PHPとかjavascriptはわからない
WordPressを使って、柔軟なサイト制作をしたい

通常のHTMLとCSSでサイトを作れる方なら、ポイントを抑えるだけで比較的簡単にマスターできると思います。
さぁ頑張ってまいりましょう！

実際にコードを書いてみよう

ブログを作る際はもう少し色々学ぶ必要があるのですが、コーポレートサイトの場合はそこまで多くありません。
手を動かしながらのほうが、学びやすいと思うので今回はサンプルサイトを作りましょう。

では簡単にサイトの要件を決めていきます。

ページ構成
- トップページ
- お知らせ一覧
  - お知らせ詳細
- 会社概要
- 事業の紹介
お知らせは管理画面を使って、クライアント様で更新できるようにする
トップページにお知らせの一覧を掲載（最新のものを数件）

というサイトを作っていきましょう。

まずテーマを作る

WordPressで新しくサイトを作る際は、新規でテーマを作ることになります。
ではテーマを作るにはどうすればいいのか。

最低限下記の3つが必要になります。

テーマのファイル一式を入れるフォルダ
index.php
style.css

順番に見ていきましょう。

まずテーマファイル一式を入れるフォルダです。
これは前回ご覧いただいたthemeフォルダの中に新規でフォルダを作成してください。
フォルダ名は半角英数です。
ここでは仮に「original」としましょう。

つづいてそのフォルダの中に「index.php」というファイルを作成してください。
中にはひとまず何も書かなくていいです。

そして「style.css」も同じくひとまず何も書かなくて大丈夫なので、作成してください。
＊css用のフォルダを作って入れたい人もいるかとは思いますが、このstyle.cssについては必ずindex.phpと同階層に置いてください。

ここまで作成すると、WordPressにテーマとして認識されて、WordPressの管理画面上に表示されるようになります。

管理画面を見てみましょう。
画面左のメニューから外観を選ぶと

こんな感じで表示されます。
マウスを乗せると有効化のボタンが出るので、それをクリックします。
＊ちなみにテーマフォルダにscreenshot.pngというファイル名で画像を入れておくと、この一覧画面のサムネイルとして読み込んでくれます。（1200px × 900px推奨）

この状態でページを開くと真っ白ですね。

ひとまずHTML感覚でコードを書く

では、何でもいいのでindex.phpにコードを書いていきます。
普通のHTMLで大丈夫です。
imgタグとcssはまだ書かないでください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>テストサイト</title>
</head>
<body>
   <header>
       <h1>テスト株式会社</h1>
       <ul>
           <li><a href="/news">お知らせ</a></li>
           <li><a href="/company">会社概要</a></li>
           <li><a href="/business">事業紹介</a></li>
       </ul>
   </header>
   
   <section>
       <h2>見出し</h2>
       <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
   </section>
   <section>
       <h2>見出し</h2>
       <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
   </section>
   <section>
       <h2>見出し</h2>
       <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
   </section>
   
   <footer><small>© Testtesttest</small></footer>
    
</body>
</html>

こんな感じ。

で、なぜimgやCSSを書かないのかというと、WordPressのテンプレートでは相対パスが通らないので、普通に書いても表示させられないのです。

パスの通し方

絶対パスで書いてもいいのですが、それだとテスト環境と本番環境で書き換えが必要になるケースがあるので、今から紹介する方法でやったほうが便利です。

まず載せたい画像をテーマフォルダ内に入れておきましょう。
ここではimgフォルダを作ってその中にいれますが、同じテーマフォルダ内であればどこでも大丈夫です。フォルダ名も自由で構いません。

<!--通常の書き方-->
<img src="img/img01.jpg" alt="">

<!--WordPressでの書き方-->
<img src="<?php echo get_template_directory_url(); ?>/img/img01.jpg" alt="">

srcの相対パスの前に『<?php echo get_template_directory_url(); ?>/』を付け足します。
これを付け足すと、自動的にこのテーマフォルダのパスを付け足した状態で、ブラウザに出力してくれます。

しかもWordPress自体の階層が変わったりした場合（たとえばテスト用ディレクトリから、本番階層への移行など）でも自動で階層を反映して出力してくれます。

cssも同じです。

<link rel="stylesheet" href="<?php echo get_template_directory_url(); ?>/style.css">

リンク（aタグ）だけが少し違っており「<?php home_url();?>」というコードを使います。
先程のはテーマフォルダのパスを出力しましたが、こちらはWordPressが表示されるURLを出力します。(公開時のURL)

ソース上での記述	ブラウザ出力の時
<?php echo get_template_directory_url(); ?>	http://www.hoge.com/wp-content/theme/original テーマフォルダまでのパスに書き換わる
<?php home_url(); ?>	http://www.hoge.com 公開用のルートパスになる

画像やCSS、Javascriptは<?php echo get_template_directory_url(); ?>
リンクは<?php home_url(); ?>

と覚えてください。

CSSを書いていこう

あとはCSSを書いていきます。
CSSに関しては通常のHTMLサイトと同じで構いません。

background-imageなどで画像のパスが必要な場合でも、相対パスで利用できます。

body{
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.7;
}
img{
    max-width: 100%;
}
header{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
header h1{
    width: 100%;
    margin: 0;
}
header ul{
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
header ul li{
    width: 100%;
    list-style: none;
}
header ul li a{
    display: inline-block;
    width: 100%;
}
section{
    padding: 20px;
    text-align: center;
}
section:nth-of-type(odd){
    background-color: #eee;
}
section *{
    max-width: 800px;
    margin: 0 auto;
}
footer{
    text-align: center;
}

みたいな感じで自由に書いてください。

ブラウザで確認すると、ちゃんとCSSも効いて、画像なども読み込めているのがわかると思います。

ここまでできればもうあと少しです。
次回は下層ページを作っていきましょう！