WordPressの使い方を完全解説！WordPressでデモサイト制作＆解説を１からやります！
Vložit
- čas přidán 16. 05. 2020
- WordPressの使い方を理解していただくために、１つのデモサイトを１から制作する工程を動画にしました。
この動画ではオリジナルのテーマを自分で作っていく方法から、各機能的な要件をいかにクリアしていくかを詳しく解説しています。
少し難しい内容になる部分はわかりやすくポイント解説動画を挟みながら進行しています！かなり長い動画にはなっていますが、この動画を通して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()も使いやすくてオススメです。
また1時間8分15秒あたりに出てくるphpのif分岐コードで、閉じタグにセミコロンは不要です。
--------
1:23 制作するデモサイトの要件解説
4:19 WordPressの初期設定とテーマ作成（基礎）
8:51 テーマ作成とテンプレートファイル
10:20 アッキーのPoint解説 / テンプレートファイルとは？
12:53 固定ページ作成と投稿作成（基礎）
14:08 header.phpなどのインクルードタグの作成
16:00 カスタム投稿タイプの概念解説
16:41 トップページの作成（ブログと新着情報の一覧作成）
16:41 トップページの作成（ブログと新着情報の一覧作成）
22:47 アッキーのPoint解説 / メインクエリを理解しよう！
37:07 アッキーのPoint解説 / フックを理解しよう！
44:21 テンプレート階層を利用した固定ページ作成
48:24 任意のファイルの共通化
51:42 アッキーのPoint解説 / デモサイトの最終的なテンプレートファイル
52:40 カスタムフィールドを使ったCMS化
1:01:29 コンタクフォームの作成
1:04:55 条件分岐と条件分岐タグ
1:09:48 仕上げ
1:10:53 終わりに
＝＝＝ WordPressの再生リスト
• WordPressの使い方講座
＝＝＝ 動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・WordPressコンプリートコース
unazuki.online/wordpress
・JavaScriptコース
unazuki.online/javascript
・HTML & CSSコース
unazuki.online/html_css
＝＝＝ SNS
■ Twitter： / life_toshindai
＝＝＝ 経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化
-------------------- 簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
CZcamsでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
#ホームページ
#作り方
#アキユキ
こういう説明を待っていました。説明のポイントが神！
プログラミングスクール級の情報が無料で見れるなんて、、
初学者は絶対みるべき！！
今日から投稿動画全部拝見させていただきます！
めっちゃ分かりやすかったです！
繰り返し見て、流れで工程をつかめるようにしたいと思います
最高に分かりやすいです
とてもわかいりやすい動画でした。ありがとうございました。
わからなくて困っていたポイントが解説されていて、とても勉強になりました！ありがとうございます！
分かりやすい説明助かります！！
ありがとうございます！！！
めちゃめちゃわかりやすかったです！！
ありがとうございます！
すっごく分かりやすく丁寧なのに、無駄が無い。
有益な投稿、ありがとうございます！
とてもわかりやすかったです！1時間があっという間でした！
とても参考になりました！
ありがとうございます😂
超有益な動画ありがとうございます。
とても勉強になりました。
Wordpressの仕組みについて本質的な理解が深まりました。有難うございます。
丁寧な解説で非常によく分かりました。WPの基本的なところは網羅されてると思います。ありがとうございました！！
どんなプログラミング教材よりもわかりやすいです！ありがとうございます！
こういった中級者向けの動画を探していました。ありがとうございます！
めちゃくちゃ勉強になりました！
あなたは神です。
本当にありがとうございます。
実際作っている人の目線で解説されているのですごく参考になります。ありがとうございます。
ワードプレス始めてでしたがこの動画みてやりたいことほとんどできました！逆にこの動画なしではめちゃくちゃ苦労してたと思います！ありがとうございます！！
Wordpress苦戦していたのですがわかりやすかったです。ありがとうございました。
神動画❗️いつも大変お世話になっています！独学で心折れそうな時いつも助けてもらっています😊
丁寧な講義に感謝です。
勉強しながら案件に取り組んでいるので、かなりハラハラした日々を過ごしていますが、アッキーさんの講義のおかげでゴールが見えました！
すごくわかりやすく、わからなかったことが理解できました。
すごくためになります！
45:00あたりの固定ページの使い方のところとても参考になりました！
「WordPressの基礎をもう一回サラッと学んでみるか」と思って何気なく開いてみたら、ただの神動画だった。
速攻でチャンネル登録した。笑
最高です！おかげさまでWPの理解が深まりました😊ありがとうございました。
デザイナーとしてCMSで自作していくプロセスが見えてスッキリしました。
とはいえ細かい点は難解な面もありますが。
テンプレ依存じゃなく作りたいものをどう再現するか勉強していきたいと思います！
めちゃくちゃわかりやすかったです！
ありがとうございます！
既存サイトの更新作業しか経験のない初心者です。
異なる投稿記事を同一ページ内に表示したり、ページごとにタイトルを変えたり、あれってどうやるんだろうと思うことが全て解説されていました。
難しそうだけど少しずつ練習してみます。ありがとうございました。
Waiting for this tutorial!!! Thank you!
webコーダーをやっているものです。
いつも勉強させていただいております！
今まで見た教材の中で最高のものです！これでwpに関する基礎知識が完璧になりました😌
45:00あたりの固定ページの使い方のところとても参考になりました！
クライアントが編集できるようにするとレイアウトが崩れるかもしれないし普通どうするんだろうとちょうど思っていたので。
やっぱり個別のPHPファイル作るんですね！
わをわ
＊自分用＊
16:45 メインループ
26:15 カスタム投稿タイプ
29:00 サブループ
33:30 アーカイブ＆ページネーション
37:38 フック（表示件数カスタマイズ）
39:35 デフォルト投稿のアーカイブ設定
43:05 フック（デフォルト投稿の表示件数カスタマイズ）
44:21 固定ページ編集
48:27 ファイルのコンポーネント
53:02 カスタムフィールド
1:01:30 コンタクトフォーム
1:05:00 条件分岐
1:09:47 テーマのサムネ変更
頼むからお金を払わせて欲しい。
有益過ぎる。
めちゃくちゃわかりやすいです。youtubeはよく見ますが、イイねボタン押したのは人生で初めてです。
人生初いいねありがとうございます！(｀･ω･´)ゞ
WordPressの勉強を始めたばかりで課題に取り組もうとしたところ、どうしてもエディタを使う意味が納得いかず手が止まっていたところ、こちらの動画を拝見して100％すっきりしました。何回も止めてメモを取りながら勉強させていただきました。とても丁寧で簡潔な説明に感謝いたします。これからもお世話になります。ありがとうございます。
そうですかー！
メモまで取ってご活用いただけて嬉しいです！ありがとうございます！
何十万円もするオンラインスクールだってこんな授業してくれないですよ。本当に。
めちゃめちゃ良かった😮
ありがとうございます！
とてもわかりやすいですね。
動画にアウトプットすることで、より理解が深まりそうですね。
私もHTMLからPHPまで勉強して、WordPressを勉強して、案件をこなしていっているところです。
自分がどこまで理解していて、どこが理解していないのかが確認できて、とてもタメになります。
ありがとうございます。
動画作ると確かに自分自身も理解が深まります！
ありがとうございます！
やった！
ありがとうございます
さっそく勉強しますφ(．．)
凄くわかりやすく勉強になります！
一点ご質問なのですが普段案件で自作テーマとかを作らず、既存のテーマを購入しテーマのテンプレートのみで納品されることはあるのでしょうか？
またテンプレートのみで納品は特に問題はないものなのでしょうか？？
僕は既存テーマで納品したことはほぼないです！
１回だけテーマ使って欲しいとのことで使いましたが結局結構改造しました。
法人相手でやる場合、基本は自作テーマだと思います。
（もちろんテーマだけで納品することもあるのだと思いますが、少なくとも僕自身や周りの話ではほぼ聞かないです）
いつもお世話になっております。お問い合わせフォームについて質問です。お問い合わせフォームは反映されたのですがcssが反映されていないように見受けられます。どのようにすれば良いでしょうか。宜しくお願いいたします。
いつも有益な情報発信をありがとうございます。
WordPressの既存テーマをカスタマイズして納品することもありますでしょうか？
Lightingとかいろいろできそうですが...わざわざ自作する必要はなんでしょうか。
そこの解説を是非お願いいたします！
僕の場合はですが、既存テーマをカスタマイズすることはほぼないです！
やったことはありますが、結局ゴリゴリに改造しましたw
結局自分でデザインしたり細かいUI設計するなら自作しかないと思うので、その点で自作している感じです！
@@web5096 そうなんですね！ありがとうございます。参考させていただきます。
とても分かりやすく、一連の流れは理解できたのですが、HTMLファイルにPHPのコードを混在させる記述方法が分からないため、途中で作業が止まってしまいました。atomで動画と同じファイルを作って、全てTestのフォルダ内に格納し、ロリポップFTP（themes)と同じところに全部入れてあるのですが、もちろんそれぞれのテンプレートファイルは空っぽ状態です。コードの解説がないとやっぱり分かりませんでした。phpを勉強しないとやっぱり無理なんでしょうか？この混在させる記述方法がわかれば出来そうな気もするんですけど。。。
最初のindex.phpとstyle.cssはどこから持ってきたファイルかわかる方いますか？
一緒に作りたかったんですけどテンプレートファイルとかphpの内容ってシェアしていただけないでしょうか？
なるほどですね、
この動画のファイルは難しいですけど、ファイルシェアも検討してみます！
同じ様な質問がありましたが、テーマ自作は
ハードル高いです。
いいテーマが見つからない時とかでしょうか？
確かに最初はハードル高いかもしれませんが、
自分で作ったデザインや考えた機能を実装していく上では自作になるので、できるようになっておくと、提案の幅は広がると思います！
自作のテーマを作るにはPHPの知識が必要ということですか？
自作するならPHPの知識は多少必要です！
こんにちは。とても参考になる動画ありがとうございます。
試しに自分で作業しながら一通りやってみたいのですが、「style.css」ファイルはどこかでシェアされてたりしますでしょうか。
ありがとうございます！
すみません、シェアしていないんです...！
いいね、サイコ―！(^^)/
分かりやすい動画ありがとうございます。
少しお聞きしたいのですが、ブログのトップページに一覧を表示する際、ブログの投稿をもし複数作りたい場合には、どのように設定すればよろしいでしょうか。
デフォルトの投稿以外にもう一カ所からも投稿できるようにして、どちらからの投稿もトップページの一覧（同じところ）に表示する場合です。
少し分かりづらい説明ですみません。。
コメントで返すのがなかなか難しいですが、
例えばブログとコラムを運用してどちらもTOPの一覧にごちゃまぜで表示したい、
という要件だという前提で、
僕の回答としては「tax_query」を使って解決です。
詳しくはコメント解説できないので、調べてみてください。
（複数の投稿タイプやカテゴリーなど複雑な指定をして一覧表示することができます）
@@web5096
ご返事ありがとうございます！
分かりづらくてすみませんでした・・
tax_queryも含め、色々と調べながらやってみたいと思います。
神ユキが、他のエセwebデザイナーを潰しにかかってる動画だと聞いて。
コメントがサクラ臭い笑疑ってないけど笑笑
正直な感想として一緒に手を動かせるような動画ではなかったので違う感じがしました。
HTMLのファイルが違うためなんかしっくり来ない。
惜しい,,,