WordPressでテーマの作成

WordPressを勉強し直すには、『急がば回れ』で、テーマ自体をゼロから作るのが一番いいと思いました。それでは、今日から、WordPressのテーマをゼロから作成していきたいと思います。まず、最初に空のPHPファイルをいくつか用意します。WordPressはブラウザ上でもファイルの操作はできるのですが、やはり使い勝手が悪いので、Dreamweaverで作成していきたいと思います。DreamweaverでWordPressを操作するための設定が、わからない方は、は、『WordPressでマルチサイト機能を利用する』をご覧下さい。

尚、作業を始める前に必ず、リモートサーバーからローカルに全ファイルをダウンロードしてから始めて下さい。ローカルフォルダの古いデータでリモートサーバーを間違えて更新しないためには、必要です。

それでは、『wp-contents/themes』フォルダを右クリックして、新規フォルダを作成し、フォルダ名を『Winroad them(任意)』と入力します。

基本ファイルの作成

次に、基本となるファイルを作成します。中身は空で構いません。ここでは、最低限必要な『index.php』『header.php』『footer.php』『home.php』『page.php』『single.php』『style.css』の7つを作成します。

次に、あらかじめ作成し、用意しておいた300×225の『screenshot.png』も同じフォルダ内に保存します。保存したら、いったんサーバーにアップします。尚、下の画像では、『screenshot.jpg』になっていますが、jpgファイルでは表示されませんでしたので、pngファイルに変更しました。

下記のようにテーマが表示されました。只、現状では、中身が何もありませんので 『サイトを表示する』をクリックしても何も表示されません。

ヘッダーファイルの作成

それでは、『header.php』ファイルを開き、『ファイル』→『変換』→『HTML5』と入力します。

タイトルの『無題ドキュメント』をクリックし、プロパティのタイトルに

<?php bloginfo(‘name’);?><?php wp_title();?>

と入力します。

次に、</title>の後に、

<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” />

と入力します。ついでに文字コードの指定も変更しておきました。WordPressの文字コードは推奨が『UTF-8』ですので、元のままでも構わないのですが、『utf-8』以外で、Wordpressを設定していた場合、文字化けが起きるのを防ぐため<?php bloginfo(‘charset’);?>に変更しました。<body>の後の</body>と</html>を削除します。

<body>の下に、下記のコードを入力します。

<!-- コンテナ --> <div id="container">
<!-- ヘッダー --> <div id="header">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>

フッターファイルの作成

次に、『footer.php』ファイルを開き、下記のコードを入力します。

<!-- フッター -->
<div id="footer">
<p>Copyright © <?php bloginfo('name'); ?>, All rights reserved.</p>
</div>

</div>
</body>
</html>

次に、『home.php』ファイルを開き、下記のコードを入力します。

<?php get_header(); ?>
<?php get_footer(); ?>

全てのファイルをサーバーにアップして、ブラウザで確認してみましょう。下記のように表示されました。

コードの解説

それでは、今日使用したWordPress関数を調べてみましょう。

bloginfo()

これは、一番基本的な関数だと思います。使用中のWordPressブログに関する様々な情報を出力します。()内の引数により、いろいろな情報を表示します。それでは、順番に見ていきましょう。

  • name   ダッシュボードの『一般設定』で指定したブログのタイトル
  • description   同じく『一般設定』で指定したブログの説明文
  • charset  ダッシュボードの『表示設定』で指定された文字コード
  • url   ブログのサイトURL
  • stylesheet_url  使用中のメインCSSのURL
  • admin_email   ダッシュボードの『一般設定』で指定した管理人のメールアドレス
  • version  現在使用中のWordPressのバージョン
  • html_tyle  ”Content-type”の設定値

他にも色々ありますが、とりあえず覚えておきたいのは、この辺でしょうか。

 wp_title()

現在のページのタイトルを表示、又は取得します。区切り文字を定義でき、WordPress2.5以上では、タイトルの前/後のどちらかに表示することができます。

<?php bloginfo(‘name’);?><?php wp_tilte(‘–‘);?>とすると、『WinRoad徒然草–今日のテーマ』と表示されますし、

<?php wp_title(‘–,true,’right’);?><?php bloginfo(‘name’);?>とすると、『今日のテーマ–WinRoad徒然草』と表示されます。

home_url()

現在のブログのホームURLを返します。任意のブログのURLを取得するには、『get_home_url()』を使用します。

 get_header()

この関数は、現在のテーマディレクトリから header.php ファイルを読み込みます。このファイルがないときは、代わりに wp-content/themes/default/header.php を読み込みます。

get_footer()

この関数は、現在のテーマディレクトリから sidebar.php ファイルを読み込みます。このファイルが無いときは、代わりに wp-content/themes/default/sidebar.php を読み込みます。

WordPressでは、『静的フロントページ』を指定していなければ、『home.php』がメインページとして表示されます。すなわち今日の設定では、WordPressのURLを指定すると、home.phpが表示され、『home.php』は、『header.php』と『footer.php』を読み込んで表示すると言うことです。

本日はここまでにします。

タグ

このページの先頭へ