第6回 WordPressタグの基本とbloginfoで自分のサイト情報を取得する
前回まではデフォルトのテンプレートから始め、ゼロから作成するために新規のテーマを作成するところまでを解説してきました。今回からは実際にWordPress内にコードを記述していきますが、phpで記述するためのタグの書き方の基本や、自分の設定したWordPressの各種情報を取得する「bloginfo」を使用して、よく使う記述をまとめていきます。WordPressはPHPを使うということで、難しいと感じる人もいると思いますが、実際はよく使うコードのみを覚えれば簡単にサイトを作ることができますので、是非、試してみてください。
解説：（有）ムーニーワークス ハヤシユタカ
解説：（有）ムーニーワークス ハヤシユタカ
●WordPressで使用するファイルは「html」ではなく「php」
まずWordPressでサイトを作成するファイルの拡張子はhtmlでは動作しませんので、phpを使用します。
phpというとプログラムというイメージがついて難しい感じがしていましますが、WordPressのタグを使う前の段階では通常のhtmlで使用しているソースファイルの拡張子をphpにするだけで動作しますので、プログラムを作成するというよりは、WordPressを使用するファイルはすべてphpの拡張子を使うのがルールと覚えてください。
phpというとプログラムというイメージがついて難しい感じがしていましますが、WordPressのタグを使う前の段階では通常のhtmlで使用しているソースファイルの拡張子をphpにするだけで動作しますので、プログラムを作成するというよりは、WordPressを使用するファイルはすべてphpの拡張子を使うのがルールと覚えてください。
●ベースとなるファイルは「index.php」を使用する
WordPressで使用するファイルは制作者によって自由に作ることができますが、ベースとなるファイルは「index.php」を使用します。
極端に言えば「index.php」のみでWordPressでサイトを作ることができます。
ただし、そうするとすべてのプログラムで条件分岐しないといけなくなり、難易度があがりますので、あらかじめ用意されているファイルを使用していきます。
※用意されているテンプレートファイルについては次回まとめます。
極端に言えば「index.php」のみでWordPressでサイトを作ることができます。
ただし、そうするとすべてのプログラムで条件分岐しないといけなくなり、難易度があがりますので、あらかじめ用意されているファイルを使用していきます。
※用意されているテンプレートファイルについては次回まとめます。
●ゼロからオリジナルのデザインを作成する際のステップ
ゼロからオリジナルのデザインを作成する際には、WordPress上で作成するというよりは、DreamWeaverなどのエディタを使用して、まず静的にページをレイアウトしてからWordPressのタグを追加していくという形が作りやすいと思います。DreamWeaver上で作成したコードをWordPressの「テーマ編集」内の該当ファイルにペーストして更新するか、FTPソフトでアップロードして変更させます。この辺は自分のやりやすい方法を見つけていくとよいでしょう。
なお本連載ではDreamWeaverを使用して作成していくことにします。
まず新規ドキュメント（Ctrl+N）でファイル作成する際にページタイプを「PHP」にすることで、DreamWeaverで作成するHTMLの拡張子をPHPにすることができます。ちなみにローカル環境では確認ができませんが、WordPressにアップロードして確認しますので問題ありません。
なお本連載ではDreamWeaverを使用して作成していくことにします。
まず新規ドキュメント（Ctrl+N）でファイル作成する際にページタイプを「PHP」にすることで、DreamWeaverで作成するHTMLの拡張子をPHPにすることができます。ちなみにローカル環境では確認ができませんが、WordPressにアップロードして確認しますので問題ありません。
新規のphpファイルを作成。title要素に「HTML基本タグ」を記述しておきます
（▲クリックして拡大）
作成したファイルをFTPソフトで自分で作成したテーマ内にアップロードして上書きさせます。上書きしましたら「外観」→「テーマ編集」をクリックして、右側の「index.php」をクリックすると、左側にコードを見ることができます。
ここで先ほど作成した記述が反映されていればOKです。
もし真っ白の場合はFTPソフトの設定ができていない場合がありますので確認してください。またFTPソフトが苦手な場合はこの「テーマ編集」内にDreamWeaverで作成したコードをコピー&ペーストさせて「ファイルを更新」ボタンで更新することができます。
ここで先ほど作成した記述が反映されていればOKです。
もし真っ白の場合はFTPソフトの設定ができていない場合がありますので確認してください。またFTPソフトが苦手な場合はこの「テーマ編集」内にDreamWeaverで作成したコードをコピー&ペーストさせて「ファイルを更新」ボタンで更新することができます。
FTPソフトでアップロードさせたあと反映していない場合は、「テーマ編集」で
ファイルが更新しているか確認するとよいでしょう
（▲クリックして拡大）
タブの部分のtitle要素が反映されています
（▲クリックして拡大）
変更後に自分のサイトのURLをブラウザで確認すると、新規テーマにして画面が真っ白になった部分は同じですが、ページのタブの部分に今回入力したtitle要素の内容が表示されます。
このようにphpファイルを使用したとしてもphpの記述を使わないでも作業をしていけますのでHTMLしか使用していなかった人でもphpをあまり意識しないで作成していけることがわかると思います。
このようにphpファイルを使用したとしてもphpの記述を使わないでも作業をしていけますのでHTMLしか使用していなかった人でもphpをあまり意識しないで作成していけることがわかると思います。
●【MEMO】WordPressに編集したファイルを反映させる方法
ファイル更新の仕方は自分のやりやすい方法を見つけて行きましょう
（▲クリックして拡大）
●WordPressタグの書き方を覚える
WordPressタグの書き方を覚えると書きましたが、記述はphpの基本の書き方と同じです。
WordPressタグはphpの記述方法と同じです
（▲クリックして拡大）
phpでは「」という書き方を使う場合が多いと思いますが、WordPressタグもその書き出しからWordPressのテンプレートタグとそのパラメーターを使います。
使用するWordPressタグはあまり多くないので一度サイトを作成する際に記述したコードをテキストエディタなどで取っておけば次から記述しないでコピー&ペーストで使用することができます。
使用するWordPressタグはあまり多くないので一度サイトを作成する際に記述したコードをテキストエディタなどで取っておけば次から記述しないでコピー&ペーストで使用することができます。
WordPressは少しの記述ミスで画面が真っ白になってエラーになってしまうので毎回記述ではなく、自分でよく使う記述をストックしておくと便利です。
●サイト情報を取得するbloginfoタグ
まずはじめに自分のWordPressの情報を確認することができる「bloginfo」タグを使用してWordPressタグの使い方を確認してみましょう。
「bloginfo」タグで様々なサイト情報を取得できます
（▲クリックして拡大）
このように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」に下記のコードを記述し更新していきます。
それでは、現在の空っぽの「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 © 2012 <?php bloginfo('name'); ?> AllRIGHTS RESERVED</p>
<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 © 2012 <?php bloginfo('name'); ?> AllRIGHTS RESERVED</p>
ブラウザで確認すると、下記のように表示されています
（▲クリックして拡大）
サイト名にはh1要素に「サイト名」を入れ、その下に「description（サイトの説明）」としてキャッチフレーズを表示して、リスト要素にbloginfoを表示させてみました。
このように見るとWordPress内に設定した内容をページ上に呼び出せていることがわかると思います。
このように見るとWordPress内に設定した内容をページ上に呼び出せていることがわかると思います。
（▲クリックして拡大）
WordPressの管理画面でサイト名や詳細を変更すると何十ページあろうと一括で変更が可能になります。
他にも記事の投稿を表示したり、特定ページのみのデザインを変更したり、カテゴリーを使用してナビゲーションを作成したりなどするとサイト全体が簡単に管理画面で管理できるサイトが作られていきます。
CMS（コンテンツ・マネジメント・システム）をゼロから作成するのはWebデザイナーではとても難しいことですが、WordPressではそのベースが作られているため、WordPressタグを使ってカスタマイズし、基幹システムを作ることができます。
今回は以上になります。
他にも記事の投稿を表示したり、特定ページのみのデザインを変更したり、カテゴリーを使用してナビゲーションを作成したりなどするとサイト全体が簡単に管理画面で管理できるサイトが作られていきます。
CMS（コンテンツ・マネジメント・システム）をゼロから作成するのはWebデザイナーではとても難しいことですが、WordPressではそのベースが作られているため、WordPressタグを使ってカスタマイズし、基幹システムを作ることができます。
今回は以上になります。
次回はWordPressをより簡単に構築するために、テンプレートファイルの種類と役割についてまとめて行きたいと思います。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
