第6回 WordPressタグの基本とbloginfoで自分のサイト情報を取得する
解説:(有)ムーニーワークス ハヤシユタカ
●WordPressで使用するファイルは「html」ではなく「php」
phpというとプログラムというイメージがついて難しい感じがしていましますが、WordPressのタグを使う前の段階では通常のhtmlで使用しているソースファイルの拡張子をphpにするだけで動作しますので、プログラムを作成するというよりは、WordPressを使用するファイルはすべてphpの拡張子を使うのがルールと覚えてください。
●ベースとなるファイルは「index.php」を使用する
極端に言えば「index.php」のみでWordPressでサイトを作ることができます。
ただし、そうするとすべてのプログラムで条件分岐しないといけなくなり、難易度があがりますので、あらかじめ用意されているファイルを使用していきます。
※用意されているテンプレートファイルについては次回まとめます。
●ゼロからオリジナルのデザインを作成する際のステップ
なお本連載ではDreamWeaverを使用して作成していくことにします。
まず新規ドキュメント(Ctrl+N)でファイル作成する際にページタイプを「PHP」にすることで、DreamWeaverで作成するHTMLの拡張子をPHPにすることができます。ちなみにローカル環境では確認ができませんが、WordPressにアップロードして確認しますので問題ありません。
ここで先ほど作成した記述が反映されていればOKです。
もし真っ白の場合はFTPソフトの設定ができていない場合がありますので確認してください。またFTPソフトが苦手な場合はこの「テーマ編集」内にDreamWeaverで作成したコードをコピー&ペーストさせて「ファイルを更新」ボタンで更新することができます。
このようにphpファイルを使用したとしてもphpの記述を使わないでも作業をしていけますのでHTMLしか使用していなかった人でもphpをあまり意識しないで作成していけることがわかると思います。
●【MEMO】WordPressに編集したファイルを反映させる方法
●WordPressタグの書き方を覚える
使用するWordPressタグはあまり多くないので一度サイトを作成する際に記述したコードをテキストエディタなどで取っておけば次から記述しないでコピー&ペーストで使用することができます。
●サイト情報を取得するbloginfoタグ
●その他の「bloginfo」タグ
●「bloginfo」でWordPressのサイト情報を出力してみる
それでは、現在の空っぽの「index.php」に下記のコードを記述し更新していきます。
<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>
このように見るとWordPress内に設定した内容をページ上に呼び出せていることがわかると思います。
他にも記事の投稿を表示したり、特定ページのみのデザインを変更したり、カテゴリーを使用してナビゲーションを作成したりなどするとサイト全体が簡単に管理画面で管理できるサイトが作られていきます。
CMS(コンテンツ・マネジメント・システム)をゼロから作成するのはWebデザイナーではとても難しいことですが、WordPressではそのベースが作られているため、WordPressタグを使ってカスタマイズし、基幹システムを作ることができます。
今回は以上になります。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
【林 豊】 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)