【副業】Wordpressの制作能力を磨く4STEP！
Wordpressオワコン！？、モダン開発を学ぶべき？
最新のWeb求人ではNext.jsやNuxt.jsなどのモダンフレームワークを使った開発がもてはやされていますが、個人のフリーランスで請け負う場合の案件としてはまだまだ、Wordpressの方が多いのではないかと思います。
Webに明るい業界ばかりではないですし、最新の機能でなくても良いから、とにかく売り上げを上げるために、気軽に更新できるホームページが欲しいというニーズの方が相対的には多いと思います。
Wordpressは世界で最も使われているCMSです。
必然的にクラウドワークスなどでの制作依頼案件も多いので
覚えておきたいスキルだと思い学習ステップをまとめてみました。
個人的には最先端のフロントエンドスキルは会社の業務から学ぶ、Wordpressは副業案件として個人でオンラインで稼ぐという感じが理想的です。
それではWordpressの学習ステップを見ていきましょう。
レベル1 環境設定 ＋ 管理画面からの編集
Wordpressには無料ブログ版と独自ドメイン版がありますが、
Web制作の依頼として考えられるのはもちろん独自ドメイン版になります。
レベル1としては独自ドメインの取得とサーバー設定、Wordpressのインストールと管理画面を使って最低限のサイト調整ができる事だと思います。
ドメインとサーバーを契約してWordpressのインストールはサーバーの管理画面からボタン1つで完了するというパターンです。
その後で管理画面にログインして、各種画像の登録や記事の作成、装飾、カテゴリーやウィジェットなどのサイト設定ができるレベルです。
このレベルではコーディングが一切できなくても、手順に沿って管理画面から操作するだけでサイトが作れるので、Wordpressを始める最初の1歩としては最適なレベル感だと思います。
このステップの内容が学べるコンテンツとしては以下の本がオススメです。
※Wordpressは随時バージョンが更新されていますので最新バージョンを解説した書籍を選びましょう。
レベル2 管理画面からCSSをカスタマイズしてみる
次のステップとしては管理画面からHTMLやCSSをカスタマイズしてみることです。
htmlのカスタマイズは記事作成画面のブロックエディタからHTMLとして編集するを選択することでhtml形式での入力ができます。
管理画面の外観→カスタマイズから独自のCSSが追加できるので、自分の思う通りのデザインになるようにコードを追加してみましょう。
レベル3 子テーマのカスタマイズをしてみる
次のステップとしては子テーマをカスタマイズして思い通りのサイトを作成するというステップです。
このステップではWordpressのファイルをローカルに作成して編集する必要があります。
ローカルにダウンロードする方法はFTPソフトを使ってWordpressをアップロードしているサーバーに接続します。
※FTPに必要な接続情報は今回使っているSakuraサーバーの場合は、サーバー管理画面にログインした後の画面で確認できます。
パスワードは記載されていないので登録完了時のメールを確認しましょう。
FTPに接続したらドメインフォルダを丸ごとローカルにダウンロードします。
※コンパクトに作業する場合は親テーマのフォルダだけをダウンロードしてもOKです。
ダウンロードできたら、子テーマに必要なファイルを作成しましょう。
子テーマに必要なファイルとは、テーマ名-childの名前で子テーマのフォルダを作成して、その中にstyle.cssとfunction.phpを追加した状態が最低限必要なファイル構成になります。
※子テーマに記載するコードの詳細は公式ページが参考になります↓
https://developer.wordpress.org/themes/advanced-topics/child-themes/
子テーマのフォルダが作成出来たら、先ほどダウンロードしたドメインフォルダのthemesフォルダを開いてその中に投入します。
※親テーマのフォルダだけをダウンロードした場合は任意の名前で空のフォルダを作成して、その中に親テーマと子テーマのフォルダを投入します。
ここまでの手順を行って、ローカルのフォルダ構成が完了したら、FTPにアップロードしましょう。
Wordpressの管理画面を開いて外観にアップロードしたテーマが表示されていたら成功です。
テーマを有効化して表示を変えてみましょう。
※余談ですが、インターネットで配布されているWordpress用の無料、有用のテーマを利用する場合も、上記と同様にローカルにダウンロードしたものを、FTPで接続して、themasフォルダの中にアップロードすれば認識されます。
以後、ファイルの変更は随時ローカルのフォルダをテキストエディターで開いて編集/保存して、それをFTPでアップロードして更新していきます。
子テーマを編集する際は、CSSについてはstyle.cssファイルを編集すれば反映されますが、phpファイルについては、親テーマから該当するファイルをコピペで複製して、それを修正してアップロードする流れで作成していきます。
※ファイル反映の優先順位についてはテンプレート階層を確認しましょう。
https://wordpress-web.and-ha.com/template-hierarchy/
※管理画面の外観→テーマファイルエディタでも編集ができますが、ローカルで作業した方がファイル構成なども分かりやすいです。
※PHPのタグを修正する際はチートシートが便利です。
https://www.webcreatorbox.com/wp-content/themes/wcb/images/wordpress_cheatsheet3.pdf
レベル4 htmlサイトをWordpress化する
次のステップとしては、通常のhtmlサイトをWordpressサイトにしてみましょう。
このステップの内容が学べるコンテンツとしては以下の本がオススメです。
⇒Wordpress 仕事の現場でサッと使える！デザイン教科書
※Wordpressは随時バージョンが更新されていますので最新バージョンを解説した書籍を選びましょう。
この記事が気に入ったらサポートをしてみませんか？