Wordbench 1126 WordPress１年生

W o r d B e n c hT O K Y O


WordPress１年生初心者が既存サイトをWordPress化してみた

渋井聖江・江川ひとみ


小さな事務所でWebサイト制作をしています北区赤羽勤務色々な勉強会に参加Twitter: @adomirar i

渋井聖江

デザイン事務所「TIMING」でデザイナーしてます北区赤羽勤務WordPress１年目Twitter : @Hitomi_e

江川ひとみ

自己紹介

WordPress１年生初心者が既存サイトをWordPress化してみた。


本日のお題

htmlとcssで組まれた既存のWebサイトを

WordPressに作り替えてみよう！！



…っていってもまず何から始めたらいいか本見てもわからない！

第一、PHPとかMySQLとかナニ？



ヽ(`Д´)ﾉｳﾜｧﾝ



諦めたらそこで試合終了ですよ

ということで、「これだけやればWordPress化出来ます！」

を簡単にご説明します。



本日のお品書き


既存サイトの構成W o r d P r e s s をインストールする管理画面のご説明T O P ページのテンプレートを作る固定ページのテンプレートを作るお問合せページを作る更新情報（ブログ記事）のテンプレートを作るT O P ページのリンク情報を書き換える補足

1.2.3.4.5.6.7.8.9.


1.既存サイトの構成


WordPress化したい既存サイト


1.既存サイトの構成


Top　About　contact　便利プラグイン　便利テーマ　お役立ちブログ　WPコミュニティ　WPインストール方法　更新情報（ブログ）

WordPress化したい既存サイト

html,css わからないけど更新したい。

PHP,CGI わからないけどメールフォーム設置したい。


初心者にはコレ（インストール）が

壁です！

でもホントは簡単。

2.WordPressをインストールする




まずは簡単インストールがあるサーバを

借りましょう！

例）サ●ラ、ロ●ポップ、X●ーバー、F●2など。探してみてください。

※サーバによって使えるバージョンが違うので注意です！



1ログイン後右下

「簡単インストール」押しましょ！ぽち。



2 簡単インストール画面上WordPressの

「インストール画面へ進む」を押しましょ！ぽち。



3 画面中腹

「インストール先URL」でインストールしたいURLを選択。

自分でDBを設定していない人は「自動選択」にチェック!

「インストール」をぽち。

1

1

2

3

2 3



4 画面中腹

「自動生成」を押して「OK」押せば完了です。



ソースの転送、完了！

「リンク」を押してWordPressの

基本設定へ移ります。


これからWPの基本設定を始めます！




5 初期設定



完成！

ココのコメント通りあっさり

インストール終わりました！



ね？

簡単でしたよね？



今ココ！本日のお品書き

既存サイトの構成W o r d P r e s s をインストールする管理画面のご説明T O P ページのテンプレートを作る固定ページのテンプレートを作るお問合せページを作る更新情報（ブログ記事）のテンプレートを作るT O P ページのリンク情報を書き換える補足

1.2.3.4.5.6.7.8.9.



3 . 管理画面のご説明



ログイン画面



管理画面



管理画面


管理画面WordPress化したサイト


1

2

3

1

2

3

3

1

2

更新情報：「設定」にて記事作成ナビ部分：「固定ページ」で作成Contact：「プラグイン」にて問合せフォーム実装｛



で、今サイトはどうなってんのよ？

表ではどう見えてるのよ？



それがコチラ！



デフォルトテーマ：Twenty Eleven1.2



じゃあ、中身をマサグッテ…



じゃなかった。中身をイジッテ…



既存サイトに見える様にします

変身 !



今ココ！

本日のお品書き既存サイトの構成W o r d P r e s s をインストールする管理画面のご説明T O P ページのテンプレートを作る固定ページのテンプレートを作るお問合せページを作る更新情報（ブログ記事）のテンプレートを作るT O P ページのリンク情報を書き換える補足

1.2.3.4.5.6.7.8.9.



本日の発表内でわからないことありました？



ハイ。ワカリマセン！！(ﾟД ；゚∂


WordPressのコミュニティに参加しよう！




11月だけでもコレだけあります！



今日はWordBenchの懇親会もありますよ！


明日はWordCamp TOKYOもありますよ！



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


@adomirar i@Hitomi_e

Word Bench

T O K Y OWordPress１年生初心者が既存サイトをWordPress化してみた。

既存のWebサイトを

WordPressのサイトに作り替えてみよう

Word Bench


トップ

固定ページ

投稿ページ

About contact 便利プラグイン便利テーマお役立ちブログ WPコミュニティ

更新情報　詳細更新情報　月別一覧

WordPressサイトの完成サンプル

Word Bench


htmlのファイル構成トップページ｜＿About｜＿contact｜＿便利プラグイン｜＿便利テーマ｜＿お役立ちブログ｜＿WPコミュニティ｜＿WPインストール方法｜＿更新情報ページ（ブログ）｜＿更新情報一覧（ブログ）｜＿スタイルシート

index.htmlabout.htmlcontact.htmlplugin.htmltheme.htmlblog.htmlcommunity.htmlinstallation.htmlinformation.htmlinformation_list.htmlbace.css

Word Bench


WordPressのファイル構成トップページ｜＿About｜＿contact｜＿便利プラグイン｜＿便利テーマ｜＿お役立ちブログ｜＿WPコミュニティ｜＿WPインストール方法｜＿更新情報ページ（ブログ）｜＿更新情報一覧（ブログ）｜＿スタイルシート

home.phppage.phppage.phppage.phppage.phppage.phppage.phppage.phpsingle.phpindex.phpstyle.css

Word Bench


1.　トップページのテンプレートを作る

Word Bench


トップページをオリジナルのテーマで表示してみましょう

Word Bench


今回のテーマ（フォルダ）名は「design-wp」にします。

design-wp

テーマフォルダを作成します

Word Bench


index.html home.php

トップページのファイル名をindex.htmlからhome.phpに変更します。

Word Bench


header.php

footer.php

home.php

page.php

index.php

テンプレートをパーツで分割します

home.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 　　　"http://www.w3.org/TR/xhtml1/・・・・・・"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>WordPress初心者お役立ちサイト</title><meta name="keywords" content="WordPress,初心者," /><meta name="description" content="WordPress初心者のお役立ち・・・" /><link href="base.css" rel="stylesheet" type="text/css" /></head>

<body>・・

<div id="foot">Copyright© 2011 WordPress初心者お役立ちサイト. All Rights Reserved.</div></div>

</body></html>

<?php get_header(); ?>

<div id="main">

<div id="upper"><ul class="blocka"><li><a href="#">便利プラグイン</a></li><li><a href="#">便利テーマ</a></li></ul>・・・<div id="under"><ul class="infotext"><li>2011.11.26 テスト</li><li>2011.11.26 テスト</li><li>2011.11.26 テスト</li></ul></div>

</div>

<?php get_footer(); ?>

header.php

footer.php

home.phpにheader.phpとfooter.phpを読み込ませます

Word Bench


base.css style.css

スタイルシートのファイル名を変更します

Word Bench


★ テーマ名の記述は必須

/*

Theme Name: design-wpTheme URI: http://timing.heteml.jp/design-wp/

Description: XXXXX

*/

スタイルシートにテーマに関する情報を記述します

Word Bench


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

<link rel="stylesheet" href="base.css" type="text/css" />

header.phpに記述されているhtmlのcssリンク情報をWP用に書き換えます

Word Bench


index.phpstyle.csshome.phppage.php＋imagesフォルダ images

作成したテーマフォルダに必要なデータ一式を入れます

design-wp

必須ファイル

Word Bench


サーバーのWordPress配下のthemeフォルダの中に作成したオリジナルテーマのフォルダをアップロードします

WordPress

design-wp

themes

wp-content

Word Bench


WordPressの管理画面で

「外観＞テーマ」を選択して　　テーマの管理画面を開き

「利用可能なテーマ」から

「design-wp」の「有効化」

WordPressの管理画面からオリジナルのテーマを有効化します

12

3

1

2

3

Word Bench


サイトのトップページを表示するとオリジナルのデザインになっています！

Word Bench


２.　固定ページのテンプレートを作る

Word Bench


固定ページをオリジナルのテーマで表示してみましょう

Word Bench


htmlの固定ページ　ファイル構成｜＿About｜＿contact｜＿便利プラグイン｜＿便利テーマ｜＿お役立ちブログ｜＿WPコミュニティ｜＿WPインストール方法

｜＿About｜＿contact｜＿便利プラグイン｜＿便利テーマ｜＿お役立ちブログ｜＿WPコミュニティ｜＿WPインストール方法

WordPressの固定ページ　ファイル構成

bout.htmlcontact.htmlplugin.htmltheme.htmlblog.htmlcommunity.htmlinstallation.html

page.phppage.phppage.phppage.phppage.phppage.phppage.php

Word Bench


固定ページを表示させるための

テンプレートを作成してみましょう

Word Bench


about.html page.php

固定ページで表示するhtmlのファイルを一つ選び、ファイル名をabout.html から page.php に変更します

about.html のソースをWordPress用に書き換えます



<div id ="content">

<div class ="post">

<h2>タイトル</h2><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>

</div>





<div id ="content">

<?php if(have_posts()): while(have_posts()): the_post(); ?><div class ="post">

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

<?php endwhile; endif; ?></div>



about.html page.php

Word Bench


Aboutのページがオリジナルのデザインで表示されます

Word Bench


３.　お問い合わせのページをつくる

Word Bench


お問い合わせのページを作りましょう

Word Bench


「Contact Form 7」というプラグインを使うと

簡単にお問い合わせフォームをつくることができます

Word Bench


プラグイン「Contact Form 7」をインストールします

Word Bench


管理画面左下にお問い合わせというタブができます

Word Bench


お問い合わせ管理画面を開き茶色の帯のところをコピーします

コピー

Word Bench


固定ページのcontactの本文の欄にペースト公開（保存）

ペースト

Word Bench


固定ページ「contact」を見るとお問い合わせフォーム表示されます

Word Bench


４.　更新情報（ブログ記事）の

テンプレートをつくる

Word Bench


更新情報を表示するページは

２種類

Word Bench


ひとつは、更新情報（ブログ）の詳細ページ

Word Bench


もうひとつは、ブログ（投稿）の月別一覧ページ

Word Bench


まずは、更新情報（ブログ）の詳細ページのテンプレートを作成しましょう

Word Bench


投稿（更新情報）ページのファイル名information.htmlをsingle.phpに変更します

information.html single.php

更新情報の詳細ページを表示するhtmlをWordPressのものと置き換えます

<div id ="side"><ul>

<li>2011年11月</li><li>2011年10月</li><li>2011年9月</li></ul></div>

<div id ="contentRight"><h2>更新情報（詳細）</h2><div class ="post">

<p>2011年11月26日</p><h3> タイトル</h3><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>


<?php wp_get_archives(); ?></ul></div>

<div id ="contentRight"><h2>更新情報（詳細）</h2>


<p><?php echo get_the_date('Y年m月d日'); ?></p><h3><?php the_title(); ?></h3><?php the_content(); ?></div>

<?php endwhile; endif; ?></div>

about.html page.php

削除

④

①②③

Word Bench


更新情報（ブログ）の詳細ページが表示されるようになりました

Word Bench


次に、

更新情報（ブログ）の月別一覧ページの

テンプレートを作成します

Word Bench


更新情報ページのファイル名information_list.htmlをindex.phpに変更します

information_list.html index.php

更新情報の月別一覧ページを表示するhtmlソースをWordPressのものと置き換えます


<li>2011年11月</li><li>2011年10月</li><li>2011年9月</li></ul></div>

<div id ="contentRight"><h2>更新情報（月別一覧）</h2><div class ="post">

<p>2011年11月26日</p><h3>タイトル</h3><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p></div>

<div class ="post"><p>2011年11月16日</p><h2>苦心しつつ、WP初心者サイト完成しました。</h2><p>ワードプレスの勉強会に参加したりしながら、・・・・</p></div>

</div>


<?php wp_get_archives(); ?></ul></div>

<div id ="contentRight"><h2>更新情報（月別一覧）</h2>


<p><?php echo get_the_date('Y年m月d日'); ?></p><h3><?php the_title(); ?></h3><?php the_content(); ?></div>

<?php endwhile; endif; ?>

</div>

information_list.html index.php

削除

削除

④

①②③

Word Bench


投稿の月別一覧ページが表示されるようになりました

2011年11月に投稿された記事一覧

Word Bench


5. トップページのリンク情報を

書き換える

Word Bench


トップページのリンク情報をこれまでに作成したWordPressの各ページへのリンク情報に書き換えましょう

header部のリンク

メイン部のリンク

更新情報（ブログ）のリンク

Word Bench


まずはheader部とメインのリンクナビのURLをワードプレスの固定ページパーマリンクに書き換えましょう

header部のリンク

メイン部のリンク

Word Bench


WordPressの管理画面個別ページ表示パーマリンクをコピー

コピー

http://timing.heteml.jp/design-wp/about/



グローバルナビのリンク情報をWordPressでコピーしたパーマリンク情報と置き換えます

<ul class="navi1"><li class="logo"><a href="http://timing.heteml.jp/design-wp/">WordPress初心者お役立ちサイト</a></li><li class="about"><a href="http://timing.heteml.jp/design-wp/about.html.html">About</a></li><li class="contact"><a href="http://timing.heteml.jp/design-wp/contact.html">Contact</a></li></ul><ul class="navi2"><li><a href="http://timing.heteml.jp/design-wp/">トップページ</a></li><li><a href="http://timing.heteml.jp/design-wp/plugin.html">便利プラグイン</a></li><li><a href="http://timing.heteml.jp/design-wp/theme.html">便利テーマ</a></li><li><a href="http://timing.heteml.jp/design-wp/blog.html/">お役立ちブログ</a></li><li><a href="http://timing.heteml.jp/design-wp/community.html">お役立ちコミュニティ</a></li><li><a href="http://timing.heteml.jp/design-wp/installation.html">WPインストール方法</a></li></ul>

<ul class="navi1"><li class="logo"><a href="http://timing.heteml.jp/design-wp/">WordPress初心者お役立ちサイト</a></li><li class="about"><a href="http://timing.heteml.jp/design-wp/about/">About</a></li><li class="contact"><a href="http://timing.heteml.jp/design-wp/contact/">Contact</a></li></ul><ul class="navi2"><li><a href="http://timing.heteml.jp/design-wp/">トップページ</a></li><li><a href="http://timing.heteml.jp/design-wp/plugin/">便利プラグイン</a></li><li><a href="http://timing.heteml.jp/design-wp/theme/">便利テーマ</a></li><li><a href="http://timing.heteml.jp/design-wp/blog/">お役立ちブログ</a></li><li><a href="http://timing.heteml.jp/design-wp/community/">お役立ちコミュニティ</a></li><li><a href="http://timing.heteml.jp/design-wp/installation/">WPインストール方法</a></li></ul>

information_list.html

index.php

メインナビのリンク情報をWordPressでコピーしたパーマリンク情報と置き換えます


index.php

<div id="upper"><ul class="blocka"><li><a href="http://timing.heteml.jp/design-wp/ plugin.html">便利プラグイン</a></li><li><a href="http://timing.heteml.jp/design-wp/ theme.html">便利テーマ</a></li></ul>

<ul class="blockb"><li><a href="http://timing.heteml.jp/design-wp/ blog.html">お役立ちブログ</a></li><li><a href="http://timing.heteml.jp/design-wp/ community.html">お役立ちコミュニティ</a>

</li></ul><ul class="blockc"><li><a href="http://timing.heteml.jp/design-wp/installation.html">WPインストール方法</a></li></ul>

<div id="upper"><ul class="blocka"><li><a href="http://timing.heteml.jp/design-wp/plugin/">便利プラグイン</a></li><li><a href="http://timing.heteml.jp/design-wp/theme/">便利テーマ</a></li></ul>

<ul class="blockb"><li><a href="http://timing.heteml.jp/design-wp/blog/">お役立ちブログ</a></li><li><a href="http://timing.heteml.jp/design-wp/community/">お役立ちコミュニティ</a>

</li></ul><ul class="blockc"><li><a href="http://timing.heteml.jp/design-wp/installation/">WPインストール方法</a></li></ul>

http://timing.heteml.jp/design-wp/plugin/


http://timing.heteml.jp/design-wp/theme/


http://timing.heteml.jp/design-wp/blog/


http://timing.heteml.jp/design-wp/community/


http://timing.heteml.jp/design-wp/installation/












Word Bench


ナビゲーションの項目をクリックするとWordPressの該当ページが表示されます

「便利プラグイン」（個別ページ）

Word Bench


更新情報の部分をWordPressへのリンク情報に書き換えます

更新情報（ブログ）のリンク

更新情報（ブログ）のリンク情報をWordPressのものと置き換えます


index.php

<div id="under">

<ul class="infotext">

<li> <a href="http://timing.heteml.jp/design-wp/plugin.html" >

2011年11月20日　WordBench 東京勉強会＆ユーザー交流会に・・・</a> </li>

<li>2011年11月16日「WordCamp Tokyo2011」に参加してきました。 </li>

<li>2011年11月16日苦心しつつ、WP初心者サイト完成しました。 </li>

<li>2011年11月13日 Hello WordPress！</li>

</ul>

</div>

<div id="under">

<ul class="infotext">

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

<li><?php echo get_the_date('Y年m月d日'); ?>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>


</ul>

</div>

削除

①

②③



Word Bench


更新情報のリストのタイトルをクリックすると、記事の詳細ページが表示されます。

「WordBench 東京勉強会＆ユーザー交流会に参加しました」更新情報詳細ページ

Word Bench


トップ

固定ページ

投稿ページ

About contact 便利プラグイン便利テーマお役立ちブログ WPコミュニティ

更新情報　詳細更新情報　月別一覧

WordPressサイトの完成サンプル

Word Bench


6.　補足

Word Bench


WordPressのテーマで必須のタグ

<?php wp_head(); ?>

<?php wp_footer(); ?>

これを書いておかないと、プラグインなどを使用した時に正常に動作しないことがあります。

</head>の直前に

</body>の直前に

Word Bench


よく使うWordPressテンプレートタグブログの基本情報を出力するタグ○管理画面で設定したブログのタイトル<?php bloginfo('name'); ?>

○管理画面で設定したブログのURL<?php bloginfo('url'); ?>

○管理画面で設定したブログのキャッチフレーズ（説明）<?php bloginfo('description'); ?>

○文字コード（UTF-8で設定される）<?php bloginfo('charset'); ?>

○スタイルシート読み込み<?php bloginfo('stylesheet_url'); ?>

Word Bench


よく使うWordPressタグ

テンプレートを取り込むタグ

○ヘッダー部分を取り込む<?php get_header(); ?>

○フッター部分を取り込む<?php get_footer(); ?>

○サイド部分を取り込む<?php get_sidebar(); ?>

Word Bench


よく使うWordPressタグ

投稿・固定ページのの情報を出力するタグ○記事のタイトルを出力する<?php the_title(); ?>

○記事の本文を出力する<?php the_content(); ?>

○記事の個別ページのURLを出力する<?php the_permalink(); ?>

○記事の投稿日を出力する<?php echo get_the_date(); ?>

Word Bench


WordPressの基本テンプレートページ種類テンプレート

トップページ

カテゴリー別ページ

月別ページ

記事の個別ページ

PAGE（ページ）

検索結果ページ

404ページ

home.php

archive.php

single.php

page.php

search.php

404.php

index.php

Word Bench


あったら便利なWordPressプラグイン● 「Contact Form 7」　お問い合わせフォーム● 「WordPress Database Backup」　データベースバックアップ● 「breadcrumb-navxt」　パンくずナビ● 「wp-pagenavi」ページナビゲーション● 「My Category Order」カテゴリーを並び替える● 「Lightbox 2」　画像をクリックすると大きく表示する● ● ●

Word Bench


ループ

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

処理内容


投稿記事があれば、投稿を表示する処理内容を繰り返し表示する

WordPress の投稿を表示するために使います

※詳しくは Codexの「The Loop」の記事などを読んでみてください。http://wpdocs.sourceforge.jp/The_Loop

http://wpdocs.sourceforge.jp/The_Loop

http://wpdocs.sourceforge.jp/The_Loop

Word Bench


ウィジェットアイキャッチ

WordPressを便利に活用できる

functions.php（テーマに関する関数を記述するファイル）

にちょちょっと関数を設定すると

が利用できるようになります。

Word Bench


WordPressをよりCMSとして活用したいと思ったら、

カスタムフィールドがおすすめ！

Word Bench


カスタムフィールドを簡単に使うことができるプラグイン３点セット

○カスタムフィールドの入力フォームを生成「custom-field-template」

○カスタム投稿タイプとカスタム分類をUI管理「custom-post-type-ui」

○カスタムフィールドの値を出力「get-custom-field-values」

Word Bench


本日のお品書き既存サイトの構成W o r d P r e s s をインストールする管理画面のご説明T O P ページのテンプレートを作る固定ページのテンプレートを作るお問合せページを作る更新情報（ブログ記事）のテンプレートを作るT O P ページのリンク情報を書き換える補足

1.2.3.4.5.6.7.8.9.

Documents

Wordbench 1126 WordPress１年生