WordBench 大分第２回勉強会「The Study」

テーマはあなたを待っている

テーマの仕組みとテンプレートタグ

2011.7.2 (Sat)

おそれるな

自己紹介

渡邊 俊之 ( @supernabeo )

ビール♡をこよなく愛する 32 歳★今年 11 月に第 2 子誕生予定！男の子に確定！WordPress を本格的に触りはじめたのは昨年の 9 月ごろ。残念なことに極度に球技がへたくそ！（誰か教えて！）

まずは復習！WordPress とは？

誰でも無料で使えるオープンソースのブログ作成ツール。PHP と MySQL が使えるサーバーがあれば OK ！現在、多くのレンタルサーバーで利用可能！ちなみに私は「Heteml」が大好きなレンタルサーバー。

導入がかんたーん！

無料な上にインストールも簡単！HTML を詳しく知らなくても OK ！レンタルサーバーさえ確保すれば、簡単に使用できます！ブログの記事や各種ページは、管理画面から楽々更新！ビジュアルエディタで記事の装飾も簡単！

とても使いやすそう！

ビジュアルエディタ

ただのブログじゃない！

デザインの変更も！機能の拡張も！ボタン一つで自由自在！管理画面からテーマ（デザイン）を探し、選んで変更！プラグインを追加することで様々な機能を追加できます！熟練者になればテーマもプラグインも作れます！

テーマ選択画面

テーマの数がすごい！

いいデザインが見つかった！！

乾杯！

プラグイン選択画面

英語だけどがんばれ！

ほしい機能がきっとみつかるはず ~♪

授業開始

WordBench 大分第 2 回勉強会「The Study」

さあ～いってみよー！

テーマ保存場所

ルートディレクトリ /wp-content/themes/ テーマ名

管理画面からでも十分にいろいろできます。

テーマを選択 … 管理画面メニュー 外観 ⇒ テーマテーマを編集 … 管理画面メニュー 外観 ⇒ テーマの編集

FTP ソフトを使える方は…

FTP ソフトを使えない方は…

ファイル構成最低 2 ファイルでできる！

基本ファイル

デザイン装飾ファイル

これがすべての表示をもと

各種デザイン設定はここから

index.php

style.css

見てみよう！テーマ「Twenty Ten」

管理画面よりテーマを「Twenty Ten」に変更し外観 ⇒ テーマの編集 を開いてみてください。

たくさんのファイルに驚愕し、はじめての方は愕然とするはず！

重要なファイルいくつか抜粋！functions.php

たくさんある php ファイル群基本的には index.php で足りるのですが、ある程度中身のあるサイトだと 1 ファイルでは管理が大変なため、分割しモジュール化したものです。

テーマ内でよく使用する処理を関数として宣言したり、テーマに追加機能をつけたりする際に使われます。

style.css 注意事項テーマとして WordPress に認識させるため、次の入力を忘れずに。

ファイルの上部に入力しましょう。

/*Theme Name: テーマの名前Description: テーマの概要*/

テストデータ

ダウンロードして下さい。

index.php と style.css のシンプルな構成。中身がほとんどないですが、これから作ります。

http://www.supernabeo.com/wordbench.zip

テンプレートタグWordPress のほとんどの情報はデータベースに保存されます。

現在、多くのテンプレートタグがありますがすべて覚える必要はありません！

これを引っ張ってきて表示するのがテンプレートタグです！

記述方法は？基本的には PHP 言語なのでその文法に従います。

定型

この例では、サイト名が文字列として表示されます。

関数 定型<?php bloginfo( ‘name’ ); ?>

bloginfo()サイトの基本的な情報を出力するタグです。

上記のタグはとてもよく使います！覚えてね。

<?php bloginfo( ‘name’ ); ?> ⇒ サイトのタイトル<?php bloginfo( ‘description’ ); ?> ⇒ キャッチフレーズ<?php bloginfo( ‘stylesheet_url’ ); ?> ⇒ CSS ファイルへのパス<?php bloginfo( ‘template_url’ ); ?> ⇒ テーマフォルダへのパス

WordPress ループブログ記事をデータベースから順番にとりだすためのタグです。

上記のタグはとてもよく使います！覚えてね。

<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?>

この間にブログの記事を表示するタグを入力します。 <?php endwhile; ?><?php endif; ?>

ループ内で使えるタグ

ループ内以外では使えませんので要注意！

<?php the_content(); ?> ⇒ 記事本文<?php the_title(); ?> ⇒ 記事タイトル　<?php the_permalink(); ?> ⇒ 記事のパーマリンク（URL)<?php the_time(); ?> ⇒ 記事の投稿時間<?php the_ID(); ?> ⇒ 記事の ID<?php the_excerpt(); ?> ⇒ 記事の抜粋

入力してみよう！<h1><?php bloginfo( 'name' ); ?></h1>

<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2><p><?php the_content(); ?></p><p><?php the_date(); ?></p><p><?php the_time(); ?></p>

<?php endwhile; ?><?php endif; ?>

テンプレートタグはまだまだ盛りだくさん！

テーマもさらに奥が深いよ！

WordBench 大分第２回勉強会 The Study

To Be Continued...

ご清聴ありがとうございました！