WordBeach で行ったデスマワークショップのスライド。 ワードプレスのインストール→操作説明→プラグイン導入→テーマ作成を行っています。 参加いただいた方ありがとうございます。

1. WoｒｄBeach 実行委員 小野隆士（@onocom）
1

2. 2

3. ワークショップで使用するファイルは以下に配置しておきまし
た(壁紙のおまけ付)。ダウンロードして使ってください。
http://onocom.net/wordbeach/workshop_files.zip
WebMatrixのインストールは、IKEDA Yuriko氏が作成した
資料が分かりやすいです。
http://www.yuriko.net/wp-
content/uploads/2011/08/webmatrix-wp.pdf
3

4. 動作環境説明
インストール
操作習得
プラグインの導入・設置
テーマ作成
4

5. 動作環境説明
インストール
操作習得
プラグインの導入・設置
5

6. WordPress 3.2 日本語版
PHP バージョン 5.2.4 以上
MySQL バージョン 5.0 以上
今回のワークショップでは、
WebMatrix
http://www.microsoft.com/web/webmatrix/
を使用します。
6

7. インストールは以下のように行います。
DB準備
WordPressをダウンロード
設定ファイル（wp-config.php）の書き換え
WordPressをアップロード
WEB上から設定
7

8. WordPressにログインすると、管理画面から色々できます。
管理画面を眺める
投稿を書く
固定ページを書く
テーマを切り替える
ウィジェットを配置する
8

9. プラグインを追加することで色々な機能を追加できます。
試しに【お問い合わせフォーム】を設置してみましょう。
探す
インストールする
有効化する
設置する
9

10. 10

11. テーマ概要説明
制作
11

12. /wp-content/themes
１フォルダ ＝ １テーマ
テーマフォルダ内には
沢山のファイルが。。。
12

13. 必須 ファイル名 内容
style.css テーマの情報およびウェブページの外観を制御するスタイルシート
index.php 記事一覧とかその他もろもろの表示を担当。テーマの親分！
single.php 個別の投稿を担当
page.php 個別のページを担当
home.php トップページを担当
header.php ヘッダを担当（get_header()で読み込まれる）
footer.php フッター担当（get_footer()で読み込まれる）
sidebar.php サイドバー担当（get_sidebar()で読み込まれる）
functions.php フックや自作の関数等を記載する
他にも沢山あるので興味のある方は以下のリンクをチェック
http://wpdocs.sourceforge.jp/テーマの作成
13

14. http://www.pref.aichi.jp/
header.php
side Index.php side
bar. (or home.php) bar.
php php
footer.php 14

15. http://www.pref.aichi.jp/
header.php
single.php
footer.php 15

16. 既存のHTMLファイルを、WordPressのテーマとして認識させ、
管理画面のテーマ一覧に表示されるようにしましょう！
index.php
index.html をコピーして index.phpにリネーム
style.css
テーマ情報を書き込み
16

17. style.cssにテーマ情報コメントを記述することで、WordPress
にテーマを認識させます。
【style.css】
@charset "utf-8";
/*
Theme Name: テーマの名前
Theme URI: テーマのホームサイトの URI
Description: テーマの説明
Author: 作者の名前
Author URI: 作者の URI
*/
17

18. テーマが参照する画像などのパスを修正しないと正しく動作
しません。index.phpに以下を挿入しましょう。
【index.php】
<?php bloginfo( ‘stylesheet_url’ ); ?> ・・・ style.css読み込み
<?php echo get_template_directory_uri(); ?> ・・・ テーマディレクトリのURL取得
Javascriptの読み込みには以下を使用するのが望ましい。今回は説明省略。
<?php wp_enquee_script(); ?> ・・・ Javascript読み込み指定
18

19. プラグインが自動で出力するスクリプトなどを読み込む為、
以下のおまじないをindex.phpに追加します。
【index.php】
<?php wp_head(); ?> ・・・ </head>タグの直前に挿入
<?php wp_footer(); ?> ・・・ </body>タグの直前に挿入
19

20. 先ほど書き込んだ投稿記事を表示させてみましょう。
【index.php】
<?php while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
<?php endwhile; ?>
20

21. index.phpのヘッダ部分をheader.phpに、
フッタ部分をfooter.phpに分割して汎用性を高めましょう。
【header.php(新規作成)】 index.phpからヘッダ部分を持ってくる。
【footer.php(新規作成)】 index.phpからフッタ部分を持ってくる。
【index.php】 以下を適切な箇所に貼り付ける。
<?php get_header(); ?>
<?php get_footer(); ?>
21

22. single.phpを作って個別記事ページを表示させましょう。
index.phpでは記事の抜粋を表示させましょう。
チームで考えてやってみましょう！
既存のテーマファイルにヒントが隠されているかも。
22

23. 抜粋は以下の関数を呼び出すことで表示されます。
【index.php】 抜粋表示
<?php the_content(); ?>
↓
<?php the_excerpt(); ?>
23

24. ○○○.phpを作って固定ページを表示させましょう。
ロゴの隣にあるメニューから固定ページへリンクさせましょう。
チームで考えてやってみましょう！
既存のテーマファイルにヒントが隠されているかも。
24

25. 固定ページ用の表示を制御するにはpage.phpを作成します。
固定ページへのリンクは以下のように行います。
【header.php】固定ページへのリンク
<?php bloginfo(‘url’); ?> ・・ ・ ルートURLを取得
<?php bloginfo(‘url’); ?>?page_id=xxx ・・・ ページを表示
他にも色々な表示方法があります。
25

26. タイトルに【記事タイトル | サイト名】
を表示するようにしてください！
個別記事ページに次の記事・前の記
事へのリンクを掲載してください！
トップページを表示する時にだけ、
「ようこそ」と表示してください！
26

27. 27