WordPress勉強会 Day01 vol.3

勉強会授業後の確認資料です。

HTMLサイトをWordPressにする本をベースに進めています。
この本では一度静的サイトを構築してからWordPress化していますが、私は普段制作する際は
そこはなくデザインの後すぐにWordPressを構築に入っています。何のテーマかというのは後ほど。

今回はデジハリで卒業制作が終わった後WordPress化したいという要望が多く、その流れでできるようにと著者の先生方がご教示していただいているのだと思います。とてもありがたいです!

宿題

localをインストールしてくること
https://localwp.com/

・localのダウンロード
https://localwp.com

・「HTMLサイトをWordPressにする」本のデータをダウンロード

・Visual Studio Code ダウンロード使えるように
https://code.visualstudio.com/download

授業内容

CMSの種類から始まり、よく使われいてるCMSとして
WordPress 、WIX、STUDIO、shopifyの説明をしました。

既存テーマとオリジナルテーマ

今回はオリジナルテーマを作ります。
既存のテーマで有名なものなど説明

ブロックテーマとクラッシックテーマ

クラッシックテーマ

よくブロックエディタとブロックテーマを混在してる方がいますが全く違っていてこれはテーマの話。以前からあったクラッシックテーマはPHPでガリっと作っていきます。
PHP知識が必要ですが自由度が高い。

  • swell
  • lightning
  • Snow Monkey 
  • cocoon

ブロックテーマ

ブロックテーマは、ビジュアルエディタで簡単にカスタマイズできる、
文字にすると説明するのが難しいですね。

  • unitone
  • Twenty Twenty-Five

それにしてもTCDは人気ですね。

ブロックエディタとクラッシックエディタ

ここがわかりづらい、、またブロック?クラッシック??なんでおんなじような名前にしちゃうかな〜

ここは実際に記事やページを書くときの作りかな。私は長年クラッシックエディタを使っていたから最初はブロックエディタが本当に使いづらくてプラグインでClassic Editorというプラグインを使っていましたが、慣れるとなんて便利なんでしょう〜〜〜
選べば素敵なギャラリーやタイトルとテキストなんかが作れてしまいます。
でもこれから皆さんがいろんなサイトに関わっていくにあたりクラッシックエディタのところもまだまだあるので知っておいた方良いと思います。

ここでは実際のサイトの管理画面を見てもらいました。

p25-26

今回作成するサイトの構成説明。

p31

WordPressってファイル名がかなり大事!
なんとなくつけてしまったファイル名が予約語だと後からめんどいです。
31に掲載されているのは使わないでね。

p56-57

全体のサイトの確認

p64-67

プラグインがたくさんありますがまずは以下をインストールして有効化

  • All-in-One WP Migration これがないと
    ローカルとリモートでのファイルのやり取りやバックアップ
  • Show Current Template
    最初どのPHPに書いてるのかわからなかったのでこれを使えばバッチリ!
  • WP Multibyte Patch
    日本語サイトならこちらはぜひ

p68-70

管理画面の設定をしていきます。
テキストの流れで問題ないのですが1点。
WordPress初期設定の「?p=123」よりも「setup-permalink」のような意味のある単語を使ったURLが良い!
Googleはハイフンを推奨し、アンダースコアを非推奨 google推奨だと以下になります。
/%category%/%postname%/
今回はテキスト通りで/%post_id%/でいきましょう。
/%category%/%postname%/にするデメリットはクライアントさんが更新する場合タイトル名に日本語入れてそのままにするとURLが変な文字の入ったものになります。

p78-85

データをコピペしてheader.phpを整えてindex.phpに読み込む作業まで!

宿題はP88まで。footer.phpを作ってindex.phpに読み込んでくること!

今日の勉強会ではWordPressの概要と設計の大切さ、静的サイトとの違いなど話すことが多かったのですが次回はもっと手を動かしていきます!

最初で大変だったと思います!頭から湯気出ちゃうよね。

次回の内容は

  • バックアップを取る方法
  • プラグインを入れてみる
  • ニュースページ全て(P122-1P82)