wordbench 1126 wordpress1年生
DESCRIPTION
Wordbench 1126 WordPress1年生TRANSCRIPT
![Page 1: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/1.jpg)
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化してみた
渋井聖江・江川ひとみ
![Page 2: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/2.jpg)
W o r d B e n c hT O K Y O
小さな事務所でWebサイト制作をしています北区赤羽勤務色々な勉強会に参加Twitter: @adomirar i
渋井聖江
デザイン事務所「TIMING」でデザイナーしてます北区赤羽勤務WordPress1年目Twitter : @Hitomi_e
江川ひとみ
自己紹介
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 3: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/3.jpg)
W o r d B e n c hT O K Y O
本日のお題
htmlとcssで組まれた既存のWebサイトを
WordPressに作り替えてみよう!!
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 4: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/4.jpg)
W o r d B e n c hT O K Y O
…っていってもまず何から始めたらいいか本見てもわからない!
第一、PHPとかMySQLとかナニ?
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 5: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/5.jpg)
W o r d B e n c hT O K Y O
ヽ(`Д´)ノウワァン
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 6: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/6.jpg)
W o r d B e n c hT O K Y O
諦めたら そこで試合終了ですよ
ということで、「これだけやればWordPress化出来ます!」
を簡単にご説明します。
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 7: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/7.jpg)
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.
![Page 8: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/8.jpg)
W o r d B e n c hT O K Y O
1.既存サイトの構成
WordPress1年生初心者が既存サイトをWordPress化してみた。
WordPress化したい既存サイト
![Page 9: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/9.jpg)
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 わからないけどメールフォーム設置したい。
![Page 10: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/10.jpg)
W o r d B e n c hT O K Y O
初心者にはコレ(インストール)が
壁です!
でもホントは簡単。
2.WordPressをインストールする
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 11: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/11.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
まずは簡単インストールがあるサーバを
借りましょう!
例)サ●ラ、ロ●ポップ、X●ーバー、F●2など。探してみてください。
※サーバによって使えるバージョンが違うので注意です!
![Page 12: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/12.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
1ログイン後右下
「簡単インストール」押しましょ!ぽち。
![Page 13: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/13.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
2 簡単インストール画面上WordPressの
「インストール画面へ進む」を押しましょ!ぽち。
![Page 14: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/14.jpg)
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
![Page 15: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/15.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
4 画面中腹
「自動生成」を押して「OK」押せば完了です。
![Page 16: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/16.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ソースの転送、完了!
「リンク」を押してWordPressの
基本設定へ移ります。
![Page 17: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/17.jpg)
W o r d B e n c hT O K Y O
これからWPの基本設定を始めます!
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 18: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/18.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
5 初期設定
![Page 19: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/19.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
完 成!
ココのコメント通りあっさり
インストール終わりました!
![Page 20: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/20.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ね?
簡単でしたよね?
![Page 21: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/21.jpg)
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.
![Page 22: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/22.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
3 . 管 理 画 面のご説 明
![Page 23: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/23.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ログイン画面
![Page 24: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/24.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
管理画面
![Page 25: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/25.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
管理画面
![Page 26: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/26.jpg)
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:「プラグイン」にて問合せフォーム実装{
![Page 27: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/27.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
で、今サイトはどうなってんのよ?
表ではどう見えてるのよ?
![Page 28: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/28.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
それがコチラ!
![Page 29: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/29.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
デフォルトテーマ:Twenty Eleven1.2
![Page 30: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/30.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
じゃあ、中身をマサグッテ…
![Page 31: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/31.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
じゃなかった。中身をイジッテ…
![Page 32: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/32.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
既存サイトに見える様にします
変身 !
![Page 33: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/33.jpg)
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.
![Page 34: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/34.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
本日の発表内でわからないことありました?
![Page 35: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/35.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
ハイ。ワカリマセン!!(゚Д ;゚∂
![Page 36: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/36.jpg)
W o r d B e n c hT O K Y O
WordPressのコミュニティに参加しよう!
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 37: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/37.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
11月だけでもコレだけあります!
![Page 38: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/38.jpg)
W o r d B e n c hT O K Y O
WordPress1年生初心者が既存サイトをWordPress化してみた。
今日はWordBenchの懇親会もありますよ!
![Page 39: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/39.jpg)
W o r d B e n c hT O K Y O
明日はWordCamp TOKYOもありますよ!
WordPress1年生初心者が既存サイトをWordPress化してみた。
![Page 40: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/40.jpg)
W o r d B e n c hT O K Y O
ご清聴ありがとうございました
WordPress1年生初心者が既存サイトをWordPress化してみた。
@adomirar i@Hitomi_e
![Page 41: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/41.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
既存のWebサイトを
WordPressのサイトに作り替えてみよう
![Page 42: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/42.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップ
固定ページ
投稿ページ
About contact 便利プラグイン 便利テーマ お役立ちブログ WPコミュニティ
更新情報 詳細 更新情報 月別一覧
WordPressサイトの完成サンプル
![Page 43: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/43.jpg)
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
![Page 44: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/44.jpg)
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
![Page 45: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/45.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
1. トップページのテンプレートを作る
![Page 46: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/46.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップページをオリジナルのテーマで表示してみましょう
![Page 47: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/47.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
今回のテーマ(フォルダ)名は「design-wp」にします。
design-wp
テーマフォルダを作成します
![Page 48: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/48.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
index.html home.php
トップページのファイル名をindex.htmlからhome.phpに変更します。
![Page 49: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/49.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
header.php
footer.php
home.php
page.php
index.php
テンプレートをパーツで分割します
![Page 50: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/50.jpg)
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を読み込ませます
![Page 51: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/51.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
base.css style.css
スタイルシートのファイル名を変更します
![Page 52: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/52.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
★ テーマ名の記述は必須
/*
Theme Name: design-wpTheme URI: http://timing.heteml.jp/design-wp/
Description: XXXXX
*/
スタイルシートにテーマに関する情報を記述します
![Page 53: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/53.jpg)
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用に書き換えます
![Page 54: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/54.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
index.phpstyle.csshome.phppage.php+imagesフォルダ images
作成したテーマフォルダに必要なデータ一式を入れます
design-wp
必須ファイル
![Page 55: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/55.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
サーバーのWordPress配下のthemeフォルダの中に作成したオリジナルテーマのフォルダをアップロードします
WordPress
design-wp
themes
wp-content
![Page 56: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/56.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressの管理画面で
「外観>テーマ」を選択して テーマの管理画面を開き
「利用可能なテーマ」から
「design-wp」の「有効化」
WordPressの管理画面からオリジナルのテーマを有効化します
12
3
1
2
3
![Page 57: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/57.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
サイトのトップページを表示するとオリジナルのデザインになっています!
![Page 58: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/58.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
2. 固定ページのテンプレートを作る
![Page 59: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/59.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページをオリジナルのテーマで表示してみましょう
![Page 60: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/60.jpg)
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
![Page 61: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/61.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページを表示させるための
テンプレートを作成してみましょう
![Page 62: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/62.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
about.html page.php
固定ページで表示するhtmlのファイルを一つ選び、ファイル名をabout.html から page.php に変更します
![Page 63: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/63.jpg)
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
![Page 64: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/64.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
Aboutのページがオリジナルのデザインで表示されます
![Page 65: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/65.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
3. お問い合わせのページをつくる
![Page 66: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/66.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
お問い合わせのページを作りましょう
![Page 67: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/67.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
「Contact Form 7」というプラグインを使うと
簡単にお問い合わせフォームをつくることができます
![Page 68: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/68.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
プラグイン「Contact Form 7」をインストールします
![Page 69: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/69.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
管理画面左下にお問い合わせというタブができます
![Page 70: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/70.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
お問い合わせ管理画面を開き茶色の帯のところをコピーします
コピー
![Page 71: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/71.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページのcontactの本文の欄にペースト公開(保存)
ペースト
![Page 72: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/72.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
固定ページ「contact」を見るとお問い合わせフォーム表示されます
![Page 73: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/73.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
4. 更新情報(ブログ記事)の
テンプレートをつくる
![Page 74: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/74.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報を表示するページは
2種類
![Page 75: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/75.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ひとつは、更新情報(ブログ)の詳細ページ
![Page 76: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/76.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
もうひとつは、ブログ(投稿)の月別一覧ページ
![Page 77: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/77.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
まずは、更新情報(ブログ)の詳細ページのテンプレートを作成しましょう
![Page 78: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/78.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
投稿(更新情報)ページのファイル名information.htmlをsingle.phpに変更します
information.html single.php
![Page 79: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/79.jpg)
更新情報の詳細ページを表示する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
削除
④
①②③
![Page 80: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/80.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報(ブログ)の詳細ページが表示されるようになりました
![Page 81: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/81.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
次に、
更新情報(ブログ)の月別一覧ページの
テンプレートを作成します
![Page 82: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/82.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報ページのファイル名information_list.htmlをindex.phpに変更します
information_list.html index.php
![Page 83: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/83.jpg)
更新情報の月別一覧ページを表示する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
削除
削除
④
①②③
![Page 84: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/84.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
投稿の月別一覧ページが表示されるようになりました
2011年11月に投稿された記事一覧
![Page 85: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/85.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
5. トップページのリンク情報を
書き換える
![Page 86: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/86.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップページのリンク情報をこれまでに作成したWordPressの各ページへのリンク情報に書き換えましょう
header部のリンク
メイン部のリンク
更新情報(ブログ)のリンク
![Page 87: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/87.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
まずはheader部とメインのリンクナビのURLをワードプレスの固定ページパーマリンクに書き換えましょう
header部のリンク
メイン部のリンク
![Page 88: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/88.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressの管理画面個別ページ表示パーマリンクをコピー
コピー
http://timing.heteml.jp/design-wp/about/
![Page 89: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/89.jpg)
グローバルナビのリンク情報を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
![Page 90: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/90.jpg)
メインナビのリンク情報を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>
![Page 91: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/91.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ナビゲーションの項目をクリックするとWordPressの該当ページが表示されます
「便利プラグイン」(個別ページ)
![Page 92: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/92.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報の部分をWordPressへのリンク情報に書き換えます
更新情報(ブログ)のリンク
![Page 93: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/93.jpg)
更新情報(ブログ)のリンク情報を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>
削除
①
②③
![Page 94: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/94.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
更新情報のリストのタイトルをクリックすると、記事の詳細ページが表示されます。
「WordBench 東京 勉強会&ユーザー交流会に参加しました」更新情報詳細ページ
![Page 95: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/95.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
トップ
固定ページ
投稿ページ
About contact 便利プラグイン 便利テーマ お役立ちブログ WPコミュニティ
更新情報 詳細 更新情報 月別一覧
WordPressサイトの完成サンプル
![Page 96: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/96.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
6. 補足
![Page 97: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/97.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressのテーマで必須のタグ
<?php wp_head(); ?>
<?php wp_footer(); ?>
これを書いておかないと、プラグインなどを使用した時に正常に動作しないことがあります。
</head>の直前に
</body>の直前に
![Page 98: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/98.jpg)
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'); ?>
![Page 99: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/99.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
よく使うWordPressタグ
テンプレートを取り込むタグ
○ヘッダー部分を取り込む<?php get_header(); ?>
○フッター部分を取り込む<?php get_footer(); ?>
○サイド部分を取り込む<?php get_sidebar(); ?>
![Page 100: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/100.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
よく使うWordPressタグ
投稿・固定ページのの情報を出力するタグ○記事のタイトルを出力する<?php the_title(); ?>
○記事の本文を出力する<?php the_content(); ?>
○記事の個別ページのURLを出力する<?php the_permalink(); ?>
○記事の投稿日を出力する<?php echo get_the_date(); ?>
![Page 101: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/101.jpg)
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
![Page 102: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/102.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
あったら便利なWordPressプラグイン● 「Contact Form 7」 お問い合わせフォーム● 「WordPress Database Backup」 データベースバックアップ● 「breadcrumb-navxt」 パンくずナビ● 「wp-pagenavi」 ページナビゲーション● 「My Category Order」 カテゴリーを並び替える● 「Lightbox 2」 画像をクリックすると大きく表示する● ● ●
![Page 103: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/103.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ループ
<?php if(have_posts()): while(have_posts()): the_post(); ?>
処理内容
<?php endwhile; endif; ?>
投稿記事があれば、投稿を表示する処理内容を繰り返し表示する
WordPress の投稿を表示するために使います
※詳しくは Codexの「The Loop」の記事などを読んでみてください。http://wpdocs.sourceforge.jp/The_Loop
![Page 104: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/104.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
ウィジェットアイキャッチ
WordPressを便利に活用できる
functions.php(テーマに関する関数を記述するファイル)
にちょちょっと関数を設定すると
が利用できるようになります。
![Page 105: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/105.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
WordPressをよりCMSとして活用したいと思ったら、
カスタムフィールドがおすすめ!
![Page 106: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/106.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトをWordPress化してみた。
カスタムフィールドを簡単に使うことができるプラグイン3点セット
○カスタムフィールドの入力フォームを生成「custom-field-template」
○カスタム投稿タイプとカスタム分類をUI管理「custom-post-type-ui」
○カスタムフィールドの値を出力「get-custom-field-values」
![Page 107: Wordbench 1126 WordPress1年生](https://reader033.vdocuments.mx/reader033/viewer/2022052506/556a6236d8b42ab0468b45d9/html5/thumbnails/107.jpg)
Word Bench
T O K Y OWordPress1年生初心者が既存サイトを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.