DeathMarchWorkshop冬の陣

ワークショップで使用したファイルを以下からダウン
ロード頂けます。

http://onocom.net/wordbench/workshop_files.zip
壁紙のおまけ付です。

2

一人で学ぶと心が折れるあなた。以下の資料もぜひ活用ください。

【電子書籍】半日でわかる！WordPressのお作法
https://gihyo.jp/dp/ebook/2011/G11B04

【動画】WordPress超初心者に身も心も捧ぐデスマワークショップ
冬の陣
・ http://www.youtube.com/watch?v=PqMm502-SmI （1/4）
・ http://www.youtube.com/watch?v=oXHH6Y-9a_E （2/4）
・ http://www.youtube.com/watch?v=wGeCC4GCY8s （3/4）
・ http://www.youtube.com/watch?v=iskgM54G-vg （4/4）

星野さん（@khoshino）撮影ありがとうございました。
3

皆様にお願い
オープンソースCMSの支援活動には皆様の「いいね
（WebMatrix ダウンロード）」が必要です！ダウ
ンロードだけでもご協力お願いします！

bit.ly/WebMatrix_iine

WebMatrix 気に入りましたら、ぜひともお試しくださ
い！
http://www.microsoft.com/japan/web/webmatrix/wordpress/

教官

LD LD LD LD

8

自己紹介
チーム名決定
チームリーダ、オペレータ等役割分担

9

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

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

11

WordPress 3.2 日本語版
PHP バージョン 5.2.4 以上
MySQL バージョン 5.0 以上
今回のワークショップでは、

WebMatrix
http://www.microsoft.com/web/webmatrix/
DL直リンク（ http://bit.ly/WebMatrix_iine ）

を使用します。
12

インストールは以下のように行います。

DB準備
WordPressをダウンロード
設定ファイル（wp-config.php）の書き換
え
WordPressをアップロード
WEB上から設定 13

WordPressにログインすると、管理画面から色々できま
す。

管理画面を眺める
投稿を書く
固定ページを書く
ウィジェットを配置する
テーマを切り替える
14

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

探す
インストールする
有効化する
設置する
15

テーマ概要説明
制作

17

/wp-content/themes

１フォルダ＝１テー
マ

テーマフォルダ内には
沢山のファイルが。。。

18

必須ファイル名内容
テーマの情報およびウェブページの外観を制御するスタイルシー
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/テーマの作成
19

http://www.pref.aichi.jp/

header.php

side Index.php side
bar. (or home.php) bar.
php php

footer.php 21

http://www.pref.aichi.jp/

header.php

single.php

footer.php 22

既存のHTMLファイルを、WordPressのテーマとして認
識させ、管理画面のテーマ一覧に表示されるようにしま
しょう！

index.php
index.html を index.phpにリネーム
style.css
テーマ情報を書き込み

24

style.cssにテーマ情報コメントを記述することで、
WordPressにテーマを認識させます。

【style.css】
/*
Theme Name: テーマの名前
Theme URI: テーマのホームサイトの URI
Description: テーマの説明
Author: 作者の名前
Author URI: 作者の URI
*/
25

テーマが参照する画像などのパスを修正しないと正しく
動作しません。index.phpに以下を挿入しましょう。

【index.php】

<?php bloginfo( ‘stylesheet_url’ ); ?> ・・・ style.css読み込み

<?php bloginfo( ‘template_directory’ ); ?> ・・・テーマディレクトリの
URL表示

26

サイトタイトルと説明文を表示させてみましょう。

【index.php】

<?php bloginfo( ‘name’ ); ?> ・・・サイトタイトル表示

<?php bloginfo( ‘description’ ); ?> ・・・説明文表示

27

プラグインが自動で出力するスクリプトなどを読み込む
為、以下のおまじないをindex.phpに追加します。

【index.php】

<?php wp_head(); ?> ・・・ </head>タグの直前に挿入

<?php wp_footer(); ?> ・・・ </body>タグの直前に挿入

28

先ほど書き込んだ投稿記事を表示させてみましょう。

【index.php】

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

<h2><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p><?php the_time('Y/m/d G:i'); ?></p>

<div><?php the_content(); ?></div>

<?php endwhile; ?>

29

トップページを表示する時、
記事の抜粋を表示させましょう。

<?php if ( is_home()) :?>

<?php the_excerpt();?>

<p class="more"><a href="<?php the_permalink(); ?>">続きを読む...</a></p>

<?php else: ?>

・・・ the_content(); ・・・

<?php endif; ?>

30

ページが見つからなかった時に、
エラーメッセージを表示させましょう。

<?php if (have_posts()) : ?>

・・・

<?php else: ?>

<p>ページが見つかりませんでした。</p>

<?php endif; ?>

31

index.phpのヘッダ部分をheader.phpに、
フッタ部分をfooter.phpに分割して汎用性を高めましょ
う。

【header.php(新規作成)】 index.phpからヘッダ部分を持ってくる。

【footer.php(新規作成)】 index.phpからフッタ部分を持ってくる。

【index.php】以下を適切な箇所に貼り付ける。

<?php get_header(); ?>

<?php get_footer(); ?>

33

single.phpを作って個別記事ページを表示させましょう。

チームで考えてやってみましょう！

既存のテーマファイルにヒントが隠されている
かも。

34

○○○.phpを作って固定ページを表示させましょう。
ロゴの隣にあるメニューから固定ページへリンクさせま
しょう。

チームで考えてやってみましょう！

既存のテーマファイルにヒントが隠されている
かも。

35

固定ページ用の表示を制御するにはpage.phpを作成しま
す。
固定ページへのリンクは以下のように行います。

【header.php】固定ページへのリンク

<?php bloginfo(‘url’); ?> ・・・サイトURLを取得

<?php bloginfo(‘url’); ?>?page_id=xxx ・・・ページを表示

他にも色々な表示方法があります。

36

DeathMarchWorkshop冬の陣

Recommended

Recommended

More Related Content

More from takashi ono

More from takashi ono (19)

Recently uploaded

Recently uploaded (7)

DeathMarchWorkshop冬の陣