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_iineWebMatrix 気に入りましたら、ぜひともお試しください！ 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: テーマのホームサイトの URIDescription: テーマの説明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

http://wp3.jp	275
http://onocom.net	37
http://paper.li	8
http://us-w1.rockmelt.com	3

DeathMarchWorkshop冬の陣

by _onocom_ on Dec 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 323

Statistics

DeathMarchWorkshop冬の陣 — Presentation Transcript