wordbenchtokoy20111126 wordpress一年生
DESCRIPTION
WordBenchtokoy20111126 WordPress一年生TRANSCRIPT
W o r d B e n c hT O K Y O
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた
渋井聖江・江川ひとみ
W o r d B e n c hT O K Y O
小さな事務所でWebサイト制作をしています北区赤羽勤務色々な勉強会に参加Twitter: @adomirar i
渋井聖江
デザイン事務所「TIMING」でデザイナーしてます北区赤羽勤務WordPress1年目Twitter : @Hitomi_e
江川ひとみ
自己紹介
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
本日のお題
htmlとcssで組まれた既存のWebサイトを
WordPressに作り替えてみよう!!
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
…っていってもまず何から始めたらいいか本見てもわからない!
第一、PHPとかMySQLとかナニ?
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
ヽ(`Д´)ノウワァン
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
諦めたら そこで試合終了ですよ
ということで、「これだけやればWordPress化出来ます!」
を簡単にご説明します。
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
本日のお品書き
WordPress1年生初心者が既存サイトを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.
W o r d B e n c hT O K Y O
1.既存サイトの構成
WordPress1年生初心者が既存サイトをWordPress化してみた。
WordPress化したい既存サイト
W o r d B e n c hT O K Y O
1.既存サイトの構成
WordPress1年生初心者が既存サイトをWordPress化してみた。
Top About contact 便利プラグイン 便利テーマ お役立ちブログ WPコミュニティ WPインストール方法 更新情報(ブログ)
WordPress化したい既存サイト
html,css わからないけど更新したい。
PHP,CGI わからないけどメールフォーム設置したい。
W o r d B e n c hT O K Y O
初心者にはコレ(インストール)が
壁です!
でもホントは簡単。
2.WordPressをインストールする
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
まずは簡単インストールがあるサーバを
借りましょう!
例)サ●ラ、ロ●ポップ、X●ーバー、F●2など。探してみてください。
※サーバによって使えるバージョンが違うので注意です!
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
1ログイン後右下
「簡単インストール」押しましょ!ぽち。
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
2 簡単インストール画面上WordPressの
「インストール画面へ進む」を押しましょ!ぽち。
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
3 画面中腹
「インストール先URL」でインストールしたいURLを選択。
自分でDBを設定していない人は「自動選択」にチェック!
「インストール」をぽち。
1
1
2
3
2 3
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
4 画面中腹
「自動生成」を押して「OK」押せば完了です。
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ソースの転送、完了!
「リンク」を押してWordPressの
基本設定へ移ります。
W o r d B e n c hT O K Y O
これからWPの基本設定を始めます!
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
5 初期設定
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
完 成!
ココのコメント通りあっさり
インストール終わりました!
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ね?
簡単でしたよね?
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトを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.
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
3 . 管 理 画 面のご説 明
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ログイン画面
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
管理画面
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
管理画面
W o r d B e n c hT O K Y O
管理画面WordPress化したサイト
WordPress1年生初心者が既存サイトをWordPress化してみた。
1
2
3
1
2
3
3
1
2
更新情報:「設定」にて記事作成ナビ部分:「固定ページ」で作成Contact:「プラグイン」にて問合せフォーム実装{
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
で、今サイトはどうなってんのよ?
表ではどう見えてるのよ?
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
それがコチラ!
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
デフォルトテーマ:Twenty Eleven1.2
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
じゃあ、中身をマサグッテ…
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
じゃなかった。中身をイジッテ…
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
既存サイトに見える様にします
変身 !
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトを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.
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
本日の発表内でわからないことありました?
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ハイ。ワカリマセン!!(゚Д ;゚∂
W o r d B e n c hT O K Y O
WordPressのコミュニティに参加しよう!
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
11月だけでもコレだけあります!
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
今日はWordBenchの懇親会もありますよ!
W o r d B e n c hT O K Y O
明日はWordCamp TOKYOもありますよ!
WordPress1年生初心者が既存サイトをWordPress化してみた。
W o r d B e n c hT O K Y O
ご清聴ありがとうございました
WordPress1年生初心者が既存サイトをWordPress化してみた。
@adomirar i@Hitomi_e
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
既存のWebサイトを
WordPressのサイトに作り替えてみよう
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップ
固定ページ
投稿ページ
About contact 便利プラグイン 便利テーマ お役立ちブログ WPコミュニティ
更新情報 詳細
更新情報 月別一覧
WordPressサイトの完成サンプル
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
htmlのファイル構成トップページ|_About|_contact|_便利プラグイン|_便利テーマ|_お役立ちブログ|_WPコミュニティ|_WPインストール方法|_更新情報ページ(ブログ)|_ 更新情報一覧(ブログ)|_ スタイルシート
index.htmlabout.htmlcontact.htmlplugin.htmltheme.htmlblog.htmlcommunity.htmlinstallation.htmlinformation.htmlinformation_list.htmlbace.css
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressのファイル構成トップページ|_About|_contact|_便利プラグイン|_便利テーマ|_お役立ちブログ|_WPコミュニティ|_WPインストール方法|_更新情報ページ(ブログ)|_ 更新情報一覧(ブログ)|_ スタイルシート
home.phppage.phppage.phppage.phppage.phppage.phppage.phppage.phpsingle.phpindex.phpstyle.css
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
1. トップページのテンプレートを作る
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップページを
オリジナルのテーマで表示してみましょう
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
今回のテーマ(フォルダ)名は「design-wp」にします。
design-wp
テーマフォルダを作成します
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
index.html home.php
トップページのファイル名をindex.htmlからhome.phpに変更します。
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
header.php
footer.php
home.php
page.php
index.php
テンプレートをパーツで分割します
2011年11月25日金曜日
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><!-- header -->・・<!-- header fin -->
<div id="foot">Copyright© 2011 WordPress初心者お役立ちサイト. All Rights Reserved.</div></div><!-- back fin -->
</body></html>
<?php get_header(); ?>
<!-- main --><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><!-- main fin -->
<?php get_footer(); ?>
header.php
footer.php
home.phpにheader.phpとfooter.phpを読み込ませます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
base.css style.css
スタイルシートのファイル名を変更します
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
★ テーマ名の記述は必須
/*
Theme Name: design-wpTheme URI: http://timing.heteml.jp/design-wp/
Description: XXXXX
*/
スタイルシートにテーマに関する情報を記述します
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
<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用に書き換えます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
index.phpstyle.csshome.phppage.php+imagesフォルダ images
作成したテーマフォルダに必要なデータ一式を入れます
design-wp
必須ファイル
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
サーバーのWordPress配下のthemeフォルダの中に作成したオリジナルテーマのフォルダをアップロードします
WordPress
design-wp
themes
wp-content
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressの管理画面で
「外観>テーマ」を選択して テーマの管理画面を開き
「利用可能なテーマ」から
「design-wp」の「有効化」
WordPressの管理画面からオリジナルのテーマを有効化します
12
3
1
2
3
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
サイトのトップページを表示するとオリジナルのデザインになっています!
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
2. 固定ページのテンプレートを作る
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページをオリジナルのテーマで表示してみましょう
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
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
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページを表示させるための
テンプレートを作成してみましょう
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
about.html page.php
固定ページで表示するhtmlのファイルを一つ選び、ファイル名をabout.html から page.php に変更します
2011年11月25日金曜日
about.html のソースをWordPress用に書き換えます
<?php get_header(); ?>
<!-- main --><div id="main">
<div id ="content">
<div class ="post">
<h2>タイトル</h2><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p><p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><!-- post fin -->
</div><!-- content fin -->
</div><!-- main fin -->
<?php get_footer(); ?>
<?php get_header(); ?>
<!-- main --><div id="main">
<div id ="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?><div class ="post">
<h2><?php the_title(); ?></h2><?php the_content(); ?></div><!-- post fin -->
<?php endwhile; endif; ?></div><!-- content fin -->
</div><!-- main fin -->
<?php get_footer(); ?>
about.html page.php
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
Aboutのページがオリジナルのデザインで表示されます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
3. お問い合わせのページをつくる
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
お問い合わせのページを作りましょう
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
「Contact Form 7」というプラグインを使うと
簡単にお問い合わせフォームをつくることができます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
プラグイン「Contact Form 7」をインストールします
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
管理画面左下にお問い合わせというタブができます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
お問い合わせ管理画面を開き茶色の帯のところをコピーします
コピー
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページのcontactの本文の欄にペースト公開(保存)
ペースト
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページ「contact」を見るとお問い合わせフォーム表示されます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
4. 更新情報(ブログ記事)の
テンプレートをつくる
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報を表示するページは
2種類
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ひとつは、更新情報(ブログ)の詳細ページ
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
もうひとつは、ブログ(投稿)の月別一覧ページ
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
まずは、更新情報(ブログ)の詳細ページのテンプレートを作成しましょう
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
投稿(更新情報)ページのファイル名information.htmlをsingle.phpに変更します
information.html single.php
2011年11月25日金曜日
更新情報の詳細ページを表示する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><!-- post fin --></div><!-- contentLeft fin -->
<div id ="side"><ul>
<?php wp_get_archives(); ?></ul></div>
<div id ="contentRight"><h2>更新情報(詳細)</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?><div class ="post">
<p><?php echo get_the_date('Y年m月d日'); ?></p><h3><?php the_title(); ?></h3><?php the_content(); ?></div><!-- post fin -->
<?php endwhile; endif; ?></div><!-- contentLeft fin -->
about.html page.php
削除
④
①②③
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報(ブログ)の詳細ページが表示されるようになりました
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
次に、
更新情報(ブログ)の月別一覧ページの
テンプレートを作成します
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報ページのファイル名information_list.htmlをindex.phpに変更します
information_list.html index.php
2011年11月25日金曜日
更新情報の月別一覧ページを表示する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><!-- post fin -->
<div class ="post"><p>2011年11月16日</p><h2>苦心しつつ、WP初心者サイト完成しました。</h2><p>ワードプレスの勉強会に参加したりしながら、・・・・</p></div><!-- post fin -->
</div><!-- contentLeft fin -->
<div id ="side"><ul>
<?php wp_get_archives(); ?></ul></div>
<div id ="contentRight"><h2>更新情報(月別一覧)</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?><div class ="post">
<p><?php echo get_the_date('Y年m月d日'); ?></p><h3><?php the_title(); ?></h3><?php the_content(); ?></div><!-- post fin -->
<?php endwhile; endif; ?>
</div><!-- contentLeft fin -->
information_list.html index.php
削除
削除
④
①②③
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
投稿の月別一覧ページが表示されるようになりました
2011年11月に投稿された記事一覧
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
5. トップページのリンク情報を
書き換える
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップページのリンク情報をこれまでに作成したWordPressの各ページへのリンク情報に書き換えましょう
header部のリンク
メイン部のリンク
更新情報(ブログ)のリンク
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
まずはheader部とメインのリンクナビのURLをワードプレスの固定ページパーマリンクに書き換えましょう
header部のリンク
メイン部のリンク
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressの管理画面個別ページ表示パーマリンクをコピー
コピー
http://timing.heteml.jp/design-wp/about/
2011年11月25日金曜日
グローバルナビのリンク情報を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><!-- navi1 fin --><!-- navi2 --><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><!-- navi1 fin --><!-- navi2 --><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
2011年11月25日金曜日
メインナビのリンク情報をWordPressでコピーしたパーマリンク情報と置き換えます
information_list.html
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>
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ナビゲーションの項目をクリックするとWordPressの該当ページが表示されます
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報の部分をWordPressへのリンク情報に書き換えます
更新情報(ブログ)のリンク
2011年11月25日金曜日
更新情報(ブログ)のリンク情報をWordPressのものと置き換えます
information_list.html
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>
<?php endwhile; endif; ?>
</ul>
</div>
削除
①
②③
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報のリストのタイトルをクリックすると、記事の詳細ページが表示されます。
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップ
固定ページ
投稿ページ
About contact 便利プラグイン 便利テーマ お役立ちブログ WPコミュニティ
更新情報 詳細
更新情報 月別一覧
WordPressサイトの完成サンプル
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
6. 補足
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressのテーマで必須のタグ
<?php wp_head(); ?>
<?php wp_footer(); ?>
これを書いておかないと、プラグインなどを使用した時に正常に動作しないことがあります。
</head>の直前に
</body>の直前に
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
よく使うWordPressテンプレートタグブログの基本情報を出力するタグ○管理画面で設定したブログのタイトル<?php bloginfo('name'); ?>
○管理画面で設定したブログのURL<?php bloginfo('url'); ?>
○管理画面で設定したブログのキャッチフレーズ(説明)<?php bloginfo('description'); ?>
○文字コード(UTF-8で設定される)<?php bloginfo('charset'); ?>
○スタイルシート読み込み<?php bloginfo('stylesheet_url'); ?>
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
よく使うWordPressタグ
テンプレートを取り込むタグ
○ヘッダー部分を取り込む<?php get_header(); ?>
○フッター部分を取り込む<?php get_footer(); ?>
○サイド部分を取り込む<?php get_sidebar(); ?>
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
よく使うWordPressタグ
投稿・固定ページのの情報を出力するタグ○記事のタイトルを出力する<?php the_title(); ?>
○記事の本文を出力する<?php the_content(); ?>
○記事の個別ページのURLを出力する<?php the_permalink(); ?>
○記事の投稿日を出力する<?php echo get_the_date(); ?>
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressの基本テンプレートページ種類 テンプレート
トップページ
カテゴリー別ページ
月別ページ
記事の個別ページ
PAGE(ページ)
検索結果ページ
404ページ
home.php
archive.php
single.php
page.php
search.php
404.php
index.php
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
あったら便利なWordPressプラグイン● 「Contact Form 7」 お問い合わせフォーム● 「WordPress Database Backup」 データベースバックアップ● 「breadcrumb-navxt」 パンくずナビ● 「wp-pagenavi」 ページナビゲーション● 「My Category Order」 カテゴリーを並び替える● 「Lightbox 2」 画像をクリックすると大きく表示する● ● ●
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ウィジェットアイキャッチ
WordPressを便利に活用できる
functions.php(テーマに関する関数を記述するファイル)
にちょちょっと関数を設定すると
が利用できるようになります。
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressをよりCMSとして活用したいと思ったら、
カスタムフィールドがおすすめ!
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
カスタムフィールドを簡単に使うことができるプラグイン3点セット
○カスタムフィールドの入力フォームを生成「custom-field-template」
○カスタム投稿タイプとカスタム分類をUI管理「custom-post-type-ui」
○カスタムフィールドの値を出力「get-custom-field-values」
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
テーマファイルの書き換えは、管理画面から行うよりローカルで行い、サーバーに上書きする方が良いです。
<理由>管理画面のテーマ編集画面では、編集状態を 戻す「(CTRL+Z)」ことができません。
テーマファイルの書き換え
2011年11月25日金曜日
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ご清聴ありがとうございました。
2011年11月25日金曜日