WordPress初心者テーマ作成勉強会まとめ

Posted on by

WordPressの勉強会に参加させていただいたので、復習がてら勉強した内容をまとめておこうと思います。所々でうろ覚えだったり誤解している可能性がありますが、興味ある方は参考程度にどうぞ。

今回の勉強会の講師:tsuyoshiさん
福岡在住のwebクリエイターです。
Webサイト: http://webcake.no003.info/
実施内容の詳細はこちら

＜目次＞
以下の流れで話を進めていきます。

  1. 勉強を始める前に
    • (個人的な)学習目標
    • 作業環境について
    • 予備知識あれこれ
  2. 作業環境を整えよう
    • MAMPをインストールする
    • WordPressをインストールする
    • その他の設定
  3. テーマを適用させよう
    • WordPressサイトの作り方(CMS化の方法)
    • WordPressにテーマを導入する
    • index.htmlをindex.phpに書き換える
    • テンプレートの置き換え
  4. カスタム投稿を使ってみよう
    • カスタム投稿とは？
    • 必要なプラグインのインストール
    • HTMLデータからカスタム投稿用ページへの書き換え
  5. 勉強会後の感想

①勉強を始める前に

●(個人的な)学習目標
・wordpressでのテーマの仕組みを理解する。
・CMS化の方法を理解する。
・とにかく自分でいじってみる。

●作業環境について
MacBook Pro 4GB
MacOS X 10.6.2(Snow Leopard)
MAMP(1.9.6.1)
テキストエディタ(今回はmiを使いました。先生はcodaを使っていました。)
※WordPressはPHPとMySQLで作られているので、MAMPを導入する必要があります。
※Windowsの場合はXAMPPを使いましょう。

●予備知識あれこれ
＜WordPressとは？＞
ブログを作ることができるソフトみたいなものです。WordPressでは「テーマ」と呼ばれるたくさんのお洒落なスキン(ページのデザイン。着せ替えみたいなもの)が無料で配布されています。ダッシュボードと呼ばれる編集画面で簡単にブログ記事を作成できます。ブログのようにHTMLなどの知識がなくても、簡単にwebページを更新できるような仕組みをCMS(Contents Management System)といいます。これをうまくカスタマイズして利用すれば、自分でデザインした簡単に更新できる動的なwebサイトを作ることができます！

＜MAMPとは？＞
Macintosh(M)Apache(A)MySQL(M)PHPの略で、これらをmacに簡単に導入することができるツール。セキュリティなどは甘いらしいけど、PHPやMySQLでWebサービスを開発するときのテストサーバとして使うことができます。似たようなものにXAMPPというものがありますが、これは上記に加えてPerlも導入できるらしいです。

＜Apache、MySQL、PHPとは？＞
Apache:最も一般的なWebサーバソフトウェア。ブラウザに対してHTMLやオブジェクトなどの表示を提供させるプログラム。PHPを動作させるにはPHPに対応したApacheを導入する必要がある(大抵のレンタルサーバではPHPやMySQLを使える)。
MySQL:同じく最も一般的なリレーショナルデータベース(表の形式のデータベース)を管理・運用するシステム。
PHP:Hypertext Preprocessorとは、動的にHTMLデータを生成することによって動的なwebページを実現することを主な目的としたプログラミング言語。

②作業環境を整えよう

●MAMPをインストールする
MAMPの公式サイトにアクセスしてMAMPをダウンロードします。
ファイルを解凍後、dmgファイルを起動させ、アプリケーションフォルダにMAMPを入れます。
MAMPを起動させます。
※MAMP PROは有料版なので、MAMPを起動させます。
MAMPが起動している状態でPHPやMySQL、Apatchが使えるようになります(PCがサーバ化している)

●WordPressをインストールする
WordPressにアクセスしてWordPress(最新版)をダウンロードします。
ファイルを解凍後、mamp/htdocs/にwordpressを入れます。

http://localhost:8888/phpMyAdmin/にアクセスし、wordpressというデータベースを作成します。

http://localhost:8888/wordpress/にアクセスし、下記のように必要事項を入力し、WordPressをインストールします。

ここはちょっとうろ覚えですが…(^p^)ゞ

wordpress(データベース)
username:root
pass:root

WordPress
username:admin(普通はこれなんだとか)
pass:任意

●その他の設定
MAMP/htdocs/wordpress/wp-config.phpを開いて、84行目 – define(‘WP_DEBUG’,false);のをfalseをtrueに変えます。

③テーマを適用させよう

●WordPressサイトの作り方(CMS化の方法)
一般に、WordPressサイトを作る際には、いきなりテーマを作っていくのではなく、予めHTMLでサイトを作り、それをPHPに書き換えることでWordPressサイトに変換します。
※今回の勉強会では、既にHTMLデータとテーマ(CSSやJS)が用意されている状態から始めます。

●WordPressにテーマを導入する
テーマのデータをダウンロードし、wordpress/wp-content/themes/に入れます。
※今回の勉強会ではaquariumというテーマを用いました。

用意したテーマのデータをWordPress上でテーマとして認識させるには、
style.cssに必ず下記のように記述し(コメント文は要らないと思うけど念のため…)、aquarium(テーマ名)フォルダの中にindex.php(内容は空で可)をテーマフォルダ内に作っておきます。

@charset "utf-8";
/* CSS Document */
@import "initialization.css"; /*初期化用*/
@import "temp.css"; /*テンプレート部分のスタイルを記述*/
@import "module.css"; /*各ページで共通して使うスタイルを記述*/
@import "option.css"; /*各オプションCSS*/
@import "ie.css"; /*IE CSS*/

WordPressのダッシュボード(http://localhost:8888/wordpress/)にアクセスしたらテーマが認識され表示されているはずなので選択して有効化します。index.phpの内容が空の場合、実際にはまだテーマが適用されないので、ここからはindex.phpを書いていきます。

●index.htmlをindex.phpに書き換える
この辺りから解説が速くて所々追いつけなかったので、部分的に間違っている可能性がありますorz

まず、予め用意したindex.htmlの内容をindex.phpにコピペします。

このままではもちろん静的なページのままです。WordPressと連動する動的なページにするためには、以下のような特殊なタグを使って書き換えていきます。

＜様々なタグ(WordPressのAPI？ライブラリ？内の便利な関数みたいなもの)＞
これらのタグをPHPのプログラムに書くことでWordPressのダッシュボードでの設定と連動させることができます。

・テンプレートタグ
 bloginfo(); //wordpressの設定情報などを表示する関数
 the_title
 the_content
 the_time
 the_permlink
 などいろいろな引数があります。この辺はSNSで公開している
APIを使ったデータ呼び出しのような感覚で使うことができます。
って言うと逆に分かりにくい？笑
・インクルードタグ
 get_header();
 get_footer();
 とかいろいろある。

※WordPressのコーディング規約を参照すると、WordPressにおけるPHPコーディングの書き方がわかります。詳しく知りたい場合は参照するといいんだとか(今回は割愛)。

WordPressと連動する動的なページにするために下記の部分を書き換えていきます。

・titleタグ
 ダッシュボードで設定した「サイトのタイトル」を表示させます。
 <title><?php bloginfo('name'); ?></title>
・metaタグ
 ダッシュボードで設定した「キャッチフレーズ」を呼び出します。
 <meta name="Description" content="<?php bloginfo('description'); ?>" />
・linkタグ
 テーマのcssファイルを読み込みます。template_directoryで
有効化したテーマまでのパスを呼び出すことができます。
最後の'/'は含まないので付け足すのを忘れないように注意しましょう。
 <link href="<?php bloginfo('template_directory'); ?>/css/import.css" rel="stylesheet" type="text/css" media="all" />
 <link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/css/ie.css" type="text/css" />
・scriptタグ
 リンクタグと同様にしてjsファイルも読み込みましょう。
 <script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/○○.js"></script>
・ヘッド
 </head>(headの閉じタグ)の直前に
 <?php wp_head(); ?>
 と付け加えることで、WordPressのメニューを表示させることができます。
・フッター
 </body>(bodyの閉じタグ)の直前に
 <?php wp_head(); ?>
 と付け加えることで、WordPressのメニューを表示させることができます。
・imgタグ
 画像を表示させます。
 <img src="<?php bloginfo('template_directory'); ?>/images/○○.jpg" width="" height="" />

大体こんな感じの要領で必要な箇所を書き換えておけばindex.htmlと同じような見た目のindex.phpが出来上がると思います。

＜bodyにcssのidとclass出力＞
この辺の解説はよく理解できなかったんですが、どうやら適用するCSSをページ毎に対応させるためにページをis_home();とかでトップページか単一ページか固定ページかで条件判定させるみたいです。間違っていたらごめんなさい！

↓こんな感じ
<body id=”index”> or <body id=”common”>

書き方例
 <?php if(is_home()):?>
 <body id="index" <?php body_class(); ?>>
 <?php else: ?>
 <body id="common" <?php body_class(); ?>>
 <?php endif: ?>

これを</head>の直後に書き込みます。

●テンプレートの置き換え
この段階ではindex.phpの中はheaderやfooterがすべて記述されているので、header.php、footer.phpなどのファイルを新しく用意し、テンプレートとして切り分ける。

それぞれのテンプレート部分について:対応するphpファイルを作成し、コピペする。
index.php:get_(phpファイルの名前)();で置き換え。

④カスタム投稿を使ってみよう
●カスタム投稿とは？
通常ページや固定ページの投稿とは違い、ダッシュボードで任意のカスタムフィールドを扱うことができます。カスタムフィールドとは、任意の形の投稿フォームみたいなもの(だと勝手に解釈)。これを利用すれば記事の形式の自由度が高まるようです。

※参考になりそうなページ
WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」

●必要なプラグインのインストール
カスタム投稿を利用するためにcustom-file-guiというプラグインをインストールしましょう。

ダッシュボードからプラグイン→新規追加をクリックしcustom-file-guiで検索します。プラグインが見つかったらダウンロードします。自動的にMAMP/wordpress/wp-content/plugins/に入ります。ダウンロードが終了したらプラグイン編集画面で有効化します。

conf.iniファイルでカスタムフィールドを定義することができます(テキストエディタで編集可)。
conf.iniファイルはcustom-file-guiフォルダ内に入れます。

＜カスタム投稿タイプの作り方＞
ダッシュボード左下のCustom Post Types→Add Newをクリックします。
投稿タイプ名、ラベル(ダッシュボードに表示される名前)を入力します。
最後にSave Custom Post Typeをクリックしたら、カスタム投稿ができるようになります。
※投稿タイプ名は英数字のみしか使えません。
※今回は水族館のサイトがテーマなので投稿タイプ名は「fish」としました。
※ここでつけた投稿タイプ名はconf.iniにおけるclassに対応するようです。

●HTMLデータからカスタム投稿用ページへの書き換え

この先ガチでうろ覚え・誤解注意。

今回は既にカスタム投稿したいHTMLのデータとconf.iniが用意されている事を前提に話を進めていきます。

カスタム投稿用のページを以下のような感じで用意します。ディレクトリはindex.phpと同じ所(aquarium(テーマ名)のフォルダの中)です。

一覧ページ:archive-fish.php
単一ページ:single-fish.php
一覧ページへのリンク:<a href=”<?php get_post_type_archive_link(‘fish’); ?>” />

一覧ページをWordPressと連動する動的なページにするために以下のように書き換えます。

投稿した数だけループで記事を表示させます。ループ出力させたい部分を
 <?php while(have_posts()):the_post(); ?>と<?php endwhile; ?>
 で囲みます。

カスタム投稿で記入した投稿内容がページに反映させるために以下のように書き換えます。

・タイトル部分
 <?php the_title(); ?>
・各項目
 <?php esc_html(get_post_meta(get_the_ID(),'名前',true)); ?>
 '名前'はconf.iniで定義されている名前が入ります。英数字が無難でしょう。

先生がcustom-field-templateというプラグインを使えば管理画面上でiniファイルを作ることもできるみたいな事を言っていた気がします。

最後らへんは時間も押していたので、駆け足で説明され、あまり理解できませんでしたm(__)m今回の勉強会でわからなかったところや詳しい解説、使用した教材などは追ってweb上にアップしてくれるそうです。そっちを見たほうがいいかもしれません／(^o^)＼ﾅﾝﾃｺｯﾀｲ

⑤勉強会後の感想

WordPressはPHPとMySQLでできているので、カスタム性が非常に高く逆に言えば覚えることも多かったように思います。だからこそ、プロのweb屋さんも使っているんだなあ…と改めて思いました。今回は先生の解説に付いていくだけでも大変でしたが、それでも前に比べるとかなりWordPressを使ったCMS化のイメージができるようになったと思います。とても濃密で有意義な3時間を過ごすことができて良かったです！普通のweb制作に慣れてきたら挑戦してみようと思いました。また何かしらの勉強会があれば積極的に参加して勉強内容はこのような形でまとめていこうと思います。

3 thoughts on “WordPress初心者テーマ作成勉強会まとめ”

  1. Pingback: 【福岡】「WordPress初心者テーマ作成勉強会」のスライドをシェアします。 #wbfukuoka - WebCake

  2. 先日は勉強会のご参加ありがとうございました！

    かなり駆け足で説明してしまったのに、こんなにまとめてくださってありがとうございます:)

    Reply ↓

    • >Tsuyoshiさん
      こちらこそ有意義な時間をどうもありがとうございました！
      Webの事は覚えることが多くてつい中途半端にインプットするだけになりがちなので、練習しながら勉強できてとても良かったです。
      スライドも参考にさせてもらいますね！

      Reply ↓

コメントを残す

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>