WordPressタグの基本とbloginfoで自分のサイト情報を取得する｜WordPressでビジネスサイトをつくろう【第6回】

前回までにデフォルトのテンプレートからゼロから作成するために新規のテーマを作成して真っ白の状態になりましたが、今回から実際にWordPress内にコードを記述していきますが、phpで記述するためのタグの書き方の基本や、自分の設定したWordPressの各種情報を取得するbloginfoを使用してよく使う記述をまとめていきます。

WordPressはPHPを使うという部分から難しいと感じる人もいると思いますが、実際はよく使うコードのみを覚えれば簡単にサイトを作ることができます。

WordPressで使用するファイルはhtmlではなくphpを使用します

基本になりますが、WordPressでサイトを作成するファイルの拡張子はhtmlでは動作しませんので、phpを使用します。

phpというとプログラムというイメージがついて難しい感じがしていましますが、WordPressのタグを使う前の段階では通常のhtmlで使用しているソースのファイルの拡張子をphpにするだけで動作しますので、プログラムを作成するというよりはWordPressを使用するファイルはすべてphpの拡張子を使うのがルールと覚えて位で大丈夫です。

ベースとなるファイルは「index.php」を使用します

WordPressで使用するファイルは制作者によって自由に作ることができますが、ベースとなるファイルは「index.php」を使用します。

極端に言えば「index.php」のみでWordPressでサイトを作ることができます。

ただし、そうするとすべてのプログラムで条件分岐しないといけなくなり、難易度があがりますので、あらかじめ用意されているファイルを使用していきます。
※用意されているテンプレートファイルについては次回まとめます。

ゼロからオリジナルのデザインを作成する際のステップ

ゼロからオリジナルのデザインを作成する際には、WordPress上で作成するというよりは、DreamWeaverなどのエディタを使用して、まず静的にページをレイアウトしてからWordPressのタグを追加していくという形が作りやすいでしょう。

DreamWeaver上で作成したコードをWordPressの「テーマ編集」内の該当ファイルにペーストして更新するか、FTPソフトでアップロードして変更させるなどで変更させます。

この辺は自分のやりやすい方法を見つけていくとよいでしょう。

本連載ではDreamWeaverを使用して作成していきます。

まず新規ドキュメント（Ctrl+N）でファイル作成する際にページタイプを「PHP」にすることでDreamWeaverで普通に作成するHTMLの拡張子をPHPにすることができます。

ローカル環境では確認ができませんが、WordPressにアップロードして確認しますので問題ありません。

作成したファイルをFTPソフトで自分で作成したテーマ内にアップロードして上書きさせます。

上書きしましたら「外観」→「テーマ編集」をクリックして、右側の「index.php」をクリックすると、左側にコードを見ることができます。

ここで先ほど作成した記述が反映されていればOKです。

もし真っ白の場合はFTPソフトの設定ができていない場合がありますので確認してください。

またFTPソフトが苦手な場合はこの「テーマ編集」内にDreamWeaverなどで作成したコードをコピー&ペーストさせて「ファイルを更新」ボタンで更新することができます。

※クリックして大きな画像をみる

※FTPソフトでアップロードさせたあと反映していない場合は「テーマ編集」でファイルが更新しているか確認するとよいでしょう。

変更したものを自分のサイトのURLをブラウザで確認すると、新規テーマにして画面が真っ白になった部分は同じですが、ページのタブの部分に今回入力したtitle要素にいれた内容が表示されます。

このようにphpファイルを使用したとしてもphpの記述を使わないでも作業をしていけますのでHTMLしか使用していなかった人でもphpをあまり意識しないで作成していけることがわかると思います。

【MEMO】WordPressに編集したファイルを反映させる方法

WordPressで作成したものを更新していく方法はいくつかありますので、自分のやりやすいやり方を見つけて行きましょう。

WordPressタグの書き方を覚える

WordPressタグの書き方を覚えると書きましたが、記述はphpの基本の書き方と同じです。

phpでは「<?php ?>」という書き方を使う場合が多いと思いますが、WordPressタグもその書き出しからWordPressのテンプレートタグとそのパラメーターを使います。

使用するWordPressタグはあまり多くないので一度サイトを作成する際に記述したコードをテキストエディタなどで取っておけば次から記述しないでコピー&ペーストで使用することができます。

WordPressは少しの記述ミスで画面が真っ白になってエラーになってしまうので毎回記述ではなく、自分でよく使う記述をストックしておくと便利です。

サイト情報を取得するbloginfoタグ

まずはじめに自分のWordPressの情報を確認することができる「bloginfo」タグを使用してWordPressタグの使い方を確認してみましょう。

このようにWordPressでは管理画面で登録した設定や投稿した記事の内容などは、テンプレートタグを使ってページに出力します。テンプレートタグの基本は上記のような形で記述します。

「bloginfo」はインストールしたWordPressの色々な情報をパラメータ－内に記述して呼び出すことができます、上記の記述の「name」はWordPressインストール時に設定した「サイト名」を取得します。

<?php bloginfo('name') ; ?>

入力した内容を確認するには左メニューの「設定」→「一般」の「サイトのタイトル」になります。

作例では「xxxcompany」となっています。

index.phpのtitle要素に<?php bloginfo(‘name’) ; ?>を置き換えてファイルを更新させます。

タブのtitle要素がWordPressで設定した「サイト名」に変わりました。

このようにWordPressタグは役割が決まっているのでこの役割を覚えていくだけでWordPress内から様々な情報を読み込んだり、条件分岐をしてくれるのでゼロからプログラムを作らないで作成できるというのもノンプログラマーの人やWebデザイナーでない人が気軽にWordPressを使える理由のひとつでもあります。

その他の「bloginfo」タグ

テンプレートタグのbloginfoは、使用中のWordPressブログに関するさまざまな情報を出力することができます。

WordPressのテンプレートタグとWordPress内の自分のサイト情報の確認のために、取得して見てみましょう。

※クリックして大きな画像をみる

※赤字の部分はページ作成でも頻繁に使用しますのでまず覚えましょう。

bloginfoでWordPressのサイト情報を出力してみる

初めてWordPressを触る人などはWordPressがどのようなことをしているかわからないで進めて行く人も多いですが、このようにサイト情報をタグで取得していくということのイメージができるとその後の作業イメージもしやすいと思いますので、自身のWordPressの情報を取得してみましょう。

現在の空っぽの「index.php」に下記のコードを記述して更新してみましょう。

<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
<ul>
  <li><?php bloginfo('url'); ?></li>
  <li><?php bloginfo('stylesheet_url'); ?></li>
  <li><?php bloginfo('template_url'); ?></li>
  <li><?php bloginfo('template_directory'); ?></li>
  <li><?php bloginfo('charset'); ?></li>
  <li><?php bloginfo('html_type'); ?></li>
  <li><?php bloginfo('rss_url'); ?></li>
  <li><?php bloginfo('rss2_url'); ?></li>
  <li><?php bloginfo('rdf_url'); ?></li>
  <li><?php bloginfo('atom_url'); ?></li>
  <li><?php bloginfo('comments_rss2_url'); ?></li>
  <li><?php bloginfo('pingback_url'); ?></li>
  <li><?php bloginfo('wpurl'); ?></li>
  <li><?php bloginfo('admin_email'); ?></li>
  <li><?php bloginfo('version'); ?></li>
</ul>
<p>COPYRIGHT &copy; 2012 <?php bloginfo('name'); ?> AllRIGHTS RESERVED</p>

ブラウザで確認するとこのように表示されています。

サイト名にはh1要素に「サイト名」を入れ、その下に「description（サイトの説明）」としてキャッチフレーズを表示して、リスト要素にbloginfoを表示させてみました。

このように見るとWordPress内に設定した内容をページ上に呼び出せていることがわかるとおもいます。

WordPressの管理画面でサイト名や詳細を変更すると何十ページあろうと一括で変更が可能になります。

他にも記事の投稿を表示したり、特定ページのみのデザインを変更したり、カテゴリーを使用してナビゲーションを作成したりなどするとサイト全体が簡単に管理画面で管理できるサイトが作られていきます。

このようなCMS（コンテンツ・マネジメント・システム）をゼロから作成するのはWebデザイナーではとても難しいことですがWordPressではそのベースが作られているので、WordPressタグを使ってカスタマイズすることで基幹のシステムは作られているという事になります。

今回は以上になります。

次回はWordPressをより簡単に構築するために、テンプレートファイルの種類と役割についてまとめて行きたいと思います。