WordBeachDeathMarchWorkshop

1

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

2

3

ワークショップで使用するファイルは以下に配置しておきました(壁紙のおまけ付)。ダウンロードして使ってください。

http://onocom.net/wordbeach/workshop_files.zip

WebMatrixのインストールは、IKEDA Yuriko氏が作成した資料が分かりやすいです。

http://www.yuriko.net/wp-content/uploads/2011/08/webmatrix-wp.pdf










4

動作環境説明

インストール

操作習得

プラグインの導入・設置

テーマ作成

5

動作環境説明

インストール

操作習得

プラグインの導入・設置

6

WordPress 3.2 日本語版

PHP バージョン 5.2.4 以上

MySQL バージョン 5.0 以上

今回のワークショップでは、

WebMatrix

http://www.microsoft.com/web/webmatrix/

を使用します。





7

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

DB準備

WordPressをダウンロード

設定ファイル（wp-config.php）の書き換え

WordPressをアップロード

WEB上から設定

8

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

管理画面を眺める

投稿を書く

固定ページを書く

テーマを切り替える

ウィジェットを配置する

9

プラグインを追加することで色々な機能を追加できます。

試しに【お問い合わせフォーム】を設置してみましょう。

探す

インストールする

有効化する

設置する

10

11

テーマ概要説明

制作

12

/wp-content/themes

１フォルダ＝１テーマ

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

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/テーマの作成

14

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

Index.php (or home.php)

header.php

sidebar.php

sidebar.php

footer.php


15


single.php

header.php

footer.php


16

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

index.php index.html をコピーして index.phpにリネーム

style.css テーマ情報を書き込み

17

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

【style.css】

@charset "utf-8";

/*

Theme Name: テーマの名前

Theme URI: テーマのホームサイトの URI

Description: テーマの説明

Author: 作者の名前

Author URI: 作者の URI

*/

18

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

【index.php】

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

<?php echo get_template_directory_uri(); ?> ・・・テーマディレクトリのURL取得

Javascriptの読み込みには以下を使用するのが望ましい。今回は説明省略。

<?php wp_enquee_script(); ?> ・・・ Javascript読み込み指定

19

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

【index.php】

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

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

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; ?>

21

index.phpのヘッダ部分をheader.phpに、

フッタ部分をfooter.phpに分割して汎用性を高めましょう。

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

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

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

<?php get_header(); ?>

<?php get_footer(); ?>

22

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

index.phpでは記事の抜粋を表示させましょう。

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

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

23

抜粋は以下の関数を呼び出すことで表示されます。

【index.php】抜粋表示

<?php the_content(); ?>

↓

<?php the_excerpt(); ?>

24

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

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

○○○.phpを作って固定ページを表示させましょう。

ロゴの隣にあるメニューから固定ページへリンクさせましょう。

25

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

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

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

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

固定ページ用の表示を制御するにはpage.phpを作成します。

固定ページへのリンクは以下のように行います。

26

タイトルに【記事タイトル | サイト名】を表示するようにしてください！

個別記事ページに次の記事・前の記事へのリンクを掲載してください！

トップページを表示する時にだけ、「ようこそ」と表示してください！

27

Technology

WordBeachDeathMarchWorkshop