HTMLサイトのWordPress化！WordPressの仕組みを理解しながら学ぼう！
ฝัง
- เผยแพร่เมื่อ 23 ส.ค. 2024
- HTMLサイトをWordPress化する方法について解説をしました。
------- ※一部訂正 -------
この動画で使用しているタグ「bloginfo」のパラメーター「url」、「template_url」は他の関数の使用が推奨されています。
bloginfo('url') → home_url()
bloginfo('template_url') → get_template_directory_uri() ※親テーマの場合
※ 動作に問題はありませんが推奨される関数を使ってください。
※ WP4.7以降はbloginfo('template_url')の代替として、get_theme_file_uri()も使いやすくてオススメです。
また39分30秒あたりに出てくるphpのif分岐コードですが、閉じタグにセミコロンは不要です。
--------
この動画では単純な手順解説ではなく、WordPressとはどのような仕組みになっているのかを理解していただくことを目標に構成しています！
少し難しい話も含みますが、今すぐに完全理解はできなくても、何となくでも頭の中にいれておくとWordPressを使っているうちに多くのことに気づくことができたり、より理解が深まっていくと思います(｀･ω･´)ゞ
＝＝＝ 動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・WordPressコンプリートコース
unazuki.online...
・JavaScriptコース
unazuki.online...
・HTML & CSSコース
unazuki.online...
＝＝＝ SNS
■ Twitter： / life_toshindai
＝＝＝ 経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化
-------------------- 簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
TH-camでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
#ホームページ
#作り方
#アキユキ
2年くらい前に自分の仕事のサイトをHTMLからワードプレスに移行しました。
その時は色々ググりながらわけも分からずやったので、放置状態になってたんですが、そろそろサイト構成をいじろうと思って勉強しています。
ほんとに詳しくて、初心者にもとてもわかりやすかったです。
ありがとうございます。
連結講座から拝見していて途中でこちらに辿り着きました。本を読んでも理解出来ているかすら分かっていなかったことがクリアになりました！ありがたやありがたや
ありがとうございます！
モヤモヤがだいぶ晴れたような気がします！
なんて価値のある動画！！
ありがとうございます！
丁寧な作りの動画を本当にありがとうございます。なんて綺麗に整理されたスライドでしょう！
時間だけでとらえると長い動画な筈が、スライドを使った良質な内容のお蔭であっという間に視聴できました。
様々な有料、課金の講座が溢れている昨今ですが、お金を少しでもとるならば、もっとしっかり作り込んで欲しいと感じていたところでしたので…。
勉強のために買った書籍では全体像をつかめなかったのですが、こちらの動画ではすんなり全体を理解でき、実際に作成まで出来ました。本当に感謝しています！
そうですか！良かったです♪
コメントありがとうございます！
すごくわかりやすく勉強になりました。ありがとうございます！僕も未経験から独学でWEB制作を勉強し、そのままフリーランスになったので共感できました。ほぼニートの経歴も似ているのでw
これからも楽しみにしています！
2:23 1）HTMLを用意する
2:54 2）共通部分のパーツ化＆パーツの読み込み
7:45 3）テーマのアップ・有効化
11:42 4）テンプレートタグを使ってパスを書き換える
17:02 5）お知らせなどの投稿系のデータを出力する
30:41 6）テンプレートファイルの概念に従い各種ファイル作成
41：08 テンプレートファイルの構成
43：28 まとめ
一通り基礎学習をして、再度このサイトを見ると理解力が倍増しました。
HTMLサイトのWordPress化の説明ありがとうございます。
html/cssでサイトを作れるのですが、wordpressで作成したサイトの上げ方が分からなかったので助かりました。
ちょうど良かったでしょうか！
コメントありがとうございます！
WORDPRESSを学び始めて1週間です。
なんとなくの状態でどんどん学習を進めてきたのですが、
この動画でここまでやってきたことがスッキリ整理できました！
スライド形式の簡潔な説明はとてもわかりやすかったです。
今から連結講座の動画も見させていただきます！
ありがとうございます！
スライド作ってよかったです！
WordPress特化のチャンネルが少ないのでとてもありがたいです😀
現在HTML→WordPressの練習をしているのでとても勉強になります🍀
var_dump()の読み解き方も詳しく教えていただけると嬉しいので、可能でしたらよろしくお願いします🙇♂️
これからも楽しみにしています📣
本当にわかりやすい動画でした、参考書などで三つほどワードプレス化の練習をしましたが、もやもやしていた部分が大分クリアになりました、繰り返し見て実務ができるように頑張ります。ありがとうございました。
wordpress化を学ぶにあたって、おすすめの参考書教えていただけませんか？
@@user-so3mq4yo1w 横から…この動画見たあと「WordPressデザインレシピ集」（狩野祐東著/技術評論社）見たらワードプレス化できるようになりました。全ての節がサンプル付なのでとても親切です。この動画といい、初心者にはほんとありがたい。
おさらい的に見ました。書籍では実際のホームページを作るイメージがあまりできずどこから手を付けたら良いかなぁと躊躇していたので、とても助かりました。骨の折れる作業をありがとうございます！このGWに、自分のサイトを練習台にWordPress化してみようと思います！楽しみです。
概念が解りやすかったです、ありがとうございました。😊
概念がわかると頭の中でシミュレーションができるので助かります！ありがとうございます！
今までみたワードプレス化の説明の中で1番分かりやすかったです。
良かったです！ありがとうございます！
簡潔に説明してくださるので頭に入ってきやすく、とても解りやすかったです。
ワードプレスの勉強チャンネルをいろいろ探していましたが、こちらで学習させていただきます😀
ワードプレスを本格的に勉強する前に、使い方、構造、概念とか知りたかったのでめっちゃ勉強になりました！ありがとうございました！！
とてもわかりやすくて勉強になりました！概念から教えてもらえる内容って中々なかったので、これまでなんとなく曖昧な感じだった部分がスッキリしました！
固定ページとヘッダーの分け方についての説明の所がとても参考になりました！ありがとうございます！😊
早速実践してみます☆スライド、分かりやすかったです！長い時間、丁寧に教えてくださりありがとうございました！
ありがとうございます！
励みになります！
いつも参考にさせてもらってます！
丁寧に教えてくださり有り難うございます！！
応援してます☺️
勉強になります！静的HTMLサイト内にワードプレスで更新した記事を表示させる方法なども取り上げていただけると嬉しいです😍
こんにちは！
毎回とてもわかりやすい説明ありがとうございます！大変助かります！
WordPress化する時に
色んなサイト、参考書を見ても
function.php がどうしても理解出来なくて😥
それについても教えて頂けたら幸いです😊
どうぞよろしくお願い致します！
小難しいWPの本よりよっぽどわかりやすいです！改めて勉強になりました♪
神回です！解説ありがとうございます！
スライドも見やすく、説明もわかりやすかったです！
とても解りやすかったです
ありがとうございました。
為になる動画ありがとうございます😊
非常に理解が進みました😁
本当にありがとうございますとても分かりやすかったです！！！！！！！！！！！
いつも勉強させてもらってます！
あきゆきさん、すごすぎw
頑張ってください！
ありがとうございます！
@@web5096
もしよかったら今度webpackで開発してそれをワードプレスに落とし込む作業とかを動画にしていただきたいです。& jsをwordpressに落とし込む動画も・・！！
助かりました！神回です！
ありがとうございました😊とても分かりやすかったでし！
わかりやすかったです！
これはわかりやすい！
有料級でした！
XDの使い方基礎～応用を見てワイヤー作りの参考にさせていただき、
こちらの動画も勉強になりました！
WPはブログ運営くらいだったのですが、新に企業様の案件を対応するので惜しみなく情報をいただけた感謝です✨
アキユキさんのWPでPHPを実装する上でのお勧め書籍があったら教えてください！
それから私はWPサイトでソースを修正しているのですが、ローカルに落としてVSCODEなどでコーディングされているんでしょうか。
ソースの落とし方やgitを使う場合の操作なども動画にしていただけると嬉しいです！
とてもイメージしやすいです！
3）テーマのアップ・有効化というのはローカルファイルでしか使えないのですか？
レンタルサーバー上のWordpressで使えるローカルファイルはどうやって導入できますか？
友達のサイトをHTML/CSSでコーディングし、まさに今WordPress化しており
とても参考になる動画でした。ありがとうございます。
１つ質問があります。
（超初心者ですみません。そしてコメント欄で質問していいものか、、、。）
後半の方でindex.phpをfront-page.phpに差し替えるとおっしゃっていましたが、
差し替えた後のindex.phpには何もコードの記述は無いのでしょうか？
いろいろググってみてはいるのですが、いまいちこれといったものが見つかりませんでした。
すでに他のWordPressの動画で話されていたら申し訳ありません。
（連結講座すべてと、その他のWordPressの動画を２〜３個拝見しています。）
テーマの作り次第ですが、index.phpの中には何も書いてなくても大丈夫です。
（テンプレート階層で何も該当するファイルがなかった場合に最終的に読まれるファイルです。そこを理解しておく必要はあります。）
@@web5096 お忙しい中、ご回答いただきありがとうございます。
何も書いてなくても大丈夫なんですねー！
はい、最終的に読まれるファイルであることは、動画に出てきていたので理解しています◎
すっきりしました、ありがとうございます。
いつも勉強になる動画を投稿頂きありがとうございます！
動画を拝見し、質問がありコメントさせて頂きました。
今回のようにWordpress化したサイトのHTML/CSSを編集する際はどのような手順で行うのが好ましいのでしょうか？（比較的に規模の大きな編集を想定しています）
小規模であればダッシュボード内の外観よりソースコードを編集すればいいのかなと感じていますが大規模の場合は、サーバーよりダウンロードして編集後再度アップロードする方法が最適なのでしょうか？（WordPressした際はエディターでブラウザ表示ができないのでは？と思い何が最適なのかがわからなくなっていしまいました＞＜）
ローカルにWordPress環境を（Local by flywheelやMAMPなどで）構築した上で、そこで作業すると効率良いです。
ローカルへの移行はAll-in-One WP Migration（プラグイン）とか使って簡単にできますので調べてみてください。
@@web5096
ご回答ありがとうございます！
とても参考になりました！！！！
追加の質問となり申し訳ございません＞＜
オリジナルテーマを作成しWordPress化する際も事前にローカルにて環境構築するのが効率的なのでしょうか？
とてもわかりやすい動画をありがとうございます。
1点質問なのですが、WordPressを使用した「お知らせ」や「コラム」専用のウェブサイトを用意して、それをWordPress化していない静的ウェブサイトに部分的に組み込むことは可能でしょうか。
動画内でも紹介されていたように、WordPressの情報が更新されると、静的ウェブサイトの方でもお知らせの見出しが更新され、新しいものから5件程度表示されるようにしたいのですが・・・
RSSを使えばできます。
WordPress側での更新情報を取得して他のサイトで表示する仕組みです。
@@web5096
ご返信いただきありがとうございます！
自身で、WordPressのREST APIを取得してJavaScriptで処理・出力を行う方法を調べていました。
しかし、RSSを使用する方法は全く思いつきませんでした。RSSであれば、JavaScriptを使用せずにPHPファイルのみで処理が完結しそうなので、よりシンプルな処理で済みそうですね！（静的サイト→PHPサイトへの変更は問題なくできそうな状況です）
有益なアドバイスをありがとうございます！実験してみようと思います。
や、は現在、非推奨なのではないですか？
ご指摘いただきありがとうございます。
概要欄にて訂正いたします。
テーマファイルの中にファイルを入れてもテーマに反映されない原因ってなんですか😢
テンプレートタグのところで何もわかんなくなった😢
20:51
22:20
3)で迷子になった