Wordpress

WordPress第3回 テーマを自作してみよう

WordPressのテーマを自作するには、

  1. 一からテーマをごりごり作る
  2. 既存のテーマを編集して自分のオリジナルに置き換えていく

この2パターンがあります。

とりあえず、普通にHTMLでコーディングして、それとは別にWordPressを第1回の手順でインストールし、2のパターンで自作デザインに変更する事にします。

あらかじめインストールされているテーマは、FTPにすると
「/(ドメイン名)/contents/wp-content/themes」の中に格納されています。
インストールされると自動的にここに作られるので、「外観」メニュー→「テーマ編集」で作成する事にします。

WordPressにはPHPから特定の値(例えばブログの名前などを自動的に表示するための値)が用意されています。
テンプレートタグと呼ばれます。
まず一番に使うのは

<?php bloginfo(‘name’); ?>
ブログの名前でしょう。
bloginfo=テンプレートタグ名
name=パラメーターの値
という意味になります。
これをheader.phpの中に記述すると、ブラウザではdbからブログ名を取り出して表示される事になります。

これ以外だと、基本的なサイトの部品をインクルードするためのタグ
<?php get_header() ?>(ヘッダー部分)
<?php get_sidebar() ?>(サイドバー部分)
<?php get_footer() ?>(フッター部分)
などは必ず使用するでしょう。
インクルードについてはこちらを参照
インクルードされる中身はそれぞれ「header.php」「sidebar.php」「footer.php」の中に普通にHTMLの該当部分をコピーペーストすれば表示されます。

<?php comments_template() ?>などのタグはコメントなので、法人ページでは使わない事もあります。
逆に忘れてはいけないのはヘッダーに入れるスタイルシート。
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’) ?>” />

要約すると「get_とついたらブロック単位のインクルード」「bloginfoとついたらタグ内の値の参照」と覚えておいて、
php部分の移動だけ慎重にしてHTMLをテンプレートにコピーペーストしていけば、とりあえず形になると思います。

最初にコーディングしたHTMLをペーストしていくのは「外観」メニュー→「テーマ編集」で

  • index(基本となるページ)
  • 単一記事の編集(記事単体)
  • ヘッダー
  • フッター
  • サイドバー

このあたりにバラバラにペーストしていく事になります。
スタイルシートは「style.css」とルートディレクトリに格納されており、どういう都合なのかテーマの製作者の表記もここに書きます。
上の方の行にコメントアウトされた

/*
Theme Name: themeTITLE
Author: Chise Umeki
Theme URI: http://web-design.link//
Description:umeny theme
*/

などの部分が製作者の表記になります。
上から

  • テーマの名前
  • 製作者の名前
  • 製作者のホームページ
  • テーマの説明

このあたりが必要な部分です。
他にも項目はありますが、必須ではないです。
同じくルートディレクトリに「screenshot.png」という画像ファイルがあり、これはテーマのサムネールになるものなので、テーマのフォルダ名ともどもオリジナルに変えておきましょう。
一度ダウンロードして編集上書きしてから再アップすればOKです。

とりあえず、これで最低限オリジナルぽいWordPressサイトが作れたかと思います。

ちなみに、WordPressにはオープンソースの宿命として脆弱性の対応というものが必要です。
こちらは是非WordPressの脆弱性以降の記事を参照して下さい。

梅木千世でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です