新社会人となり、就職先でWordPressを触ることになったがあまり良く分からないよという初学者のための手引きです。
既にそれなりの知識があり、自分好みの環境があるよって方はそちらを使用して頂ければよいと思います。
この記事はWordPress初学者が参考になればという記事です。
初心者に覚えてほしいことを詰め込んだのでかなり多いですが、WordPressでの制作にはこんなものを使うことがあるのだとみて頂きたいです。
ローカル環境
ローカル環境とは自分のPC内にWordPressを作成し動かすための環境です。
残念ながらWordPressはHTMLで作成したものとは違いPHPファイルをHTMLとして表示する環境がいります。
LOCAL By Flywheel
WindowsでもMacでもWordPressのローカル環境を作るならLOCAL By Flywheelがおすすめです。
インストールが完了したら1分程でWordPressを立ち上げることができます。初心者がミスをしがちなデータベースの接続も全て行ってくれます。
WordPressをデータベースと接続する知識は何処かで必要になるかもしれませんが、最近のレンタルサーバーは簡単インストールがついている所が多いので初心者には取り敢えず必要な知識ではないので慣れてきてから学習すればよいと思います。
今でもGoogleでWordPress ローカル環境と調べるとXAMPPでの構築方法が紹介されますが、初心者問わずお奨めしません。
使い方は簡単ですが、動画を見たほうが早いので上記動画から確認してください。
エディタ
エディタはプログラムを書いていくためのツールです。プログラマー向けの高機能メモ帳と思っていただいて大丈夫です。
様々なものがありますが、初心者は困って調べたらたくさんの記事がでてくるVScodeがおすすめです。
VScode
VScodeはダウンロードしたらすぐに使用することができますが、拡張機能を追加することができるので使いやすく便利なものを入れておくと良いです。
個人的におすすめな拡張機能を紹介します。
Japanese Language Pack for Visual Studio Code
VScodeを日本語化してくれます。
PHP Intelephense
PHPを書く時に入力補完をしてくれたり、記述間違えを指摘してくれたりします。
初心者にありがちですが、やたら変数を用意し中には使っていない変数が放置などがありますが、使用していない変数を教えてくれたりなどいたり尽くせりです。
同じような拡張機能にPHP IntelliSenseがありますが、こちらはインストール後にphp.exeのパスを指定しなければいけないのでLocalByFlyweelを使用している場合はおすすめしません。
機能もほぼ一緒なので、PHP Intelephenseのみ入れておけば良いと思います。
また、Intelephenseはインストール時WordPressで用意された関数をサポートしていません。なのでVScode上で未定義の関数として指摘されてしまいます。
上記リンクから説明を読み拡張機能の設定を変更すれば直ります。
[Deprecated] Bracket Pair Colorizer 2
PHPはpythonなどのようにインデント管理ではなく、{}のような括弧でプログラムの塊を認識します。
[Deprecated] Bracket Pair Colorizer 2はクラスや関数などがどこからどこまでなのか分かりやすくするためボーダーラインをつけてくれます。
Live Sass Compiler
WordPressに限らず最近では生のCSSを書くことはあまりなく、SCSSというものを使用します。VScodeでSCSSを使う場合はこの拡張機能を入れるのみで使用できます。
Todo Tree
Todo Treeは個人的に好きなツールなので入れなくても効率とかには関係ありません。
WordPressでのテーマ作成中にたまにあるのですが、プログラムは一応動いたが、汚いので後で書き直そうとかそういった場面があります。
// TODO: 汚いので〇〇日までに書き直す
function BeginnerCode() {
// キレイではないコード
}
みたいな感じでTODOとして書いておくとTodo Tree画面上で一覧として表示できます。TODO以外にも他の書き方ができます。
| 名前 | 意味 |
|---|---|
| TODO | 後で追加、修正などが必要 |
| FIXME | 不具合があるコード、修正必要 |
| HACK | キレイじゃないコード、書き直しが必要 |
| XXX | なぜ動くか分からないコード |
| REVIEW | 動くが見直しが必要 |
| OPTIMIZE | 無駄が多く処理の負担になっている箇所 |
| CHANGED | コード変更した内容 |
| NOTE | 残す必要のあるメモ |
| WARNING | 注意が必要な箇所 |
| COMP※ | TODOが完了した内容 |
みたいな感じで他の人と共有する際や、納品後に残しておきたい内容など様々な場面で使えるひと手間です。
COMPはもともとなく僕自身が追加したものです。Todo Treeではこのように自分独自のものも追加できます。僕はTODOが完了してからTODOを見直すことが多いのでこれを追加しています。
テーマ
VScodeテーマの一覧が見れます。テーマを変えたところで効率は変わりませんが、気分が上がるのでお勧めです。
ファイル転送ツール(FTP/SFTP)
最近ではGitからデプロイしたりとおしゃれな実装が多いので使う機会が減ってきていますが、使用する場面はでてくると思います。
FTPでもSFTPでも初心者ならFilezillaがおすすめです。
よくあるミスで、ファイルをアップロードする場所を間違えたとありますが、Filezillaには同期ブラウジングという機能があるので事前に防止することができます。
Gitクライアント
Gitは会社などによりクライアントソフトが指定されていたり、そもそもクライアントソフトを使用しないところなどあると思いますが、個人的におすすめなGitクライアントは以下2つです。
GitKraken
プライベートリポジトリの操作は有料だったりとしますが、かなり使いやすくおすすめです。
Sourcetree
Bitbucketを使う場合はかなり使いやすいです。
僕も最初はSourcetreeを使用していました。たまに認証がうまくできなく使用できなくなるとかのトラブルがありますが使いやすいのでお勧めです。
WordPress学習
WordPressとはなんぞやというところはここで説明するときりがないのでかいつまんで読んでおくといいよっていうサイトなりをまとめました。
なお、基本的にテーマ制作の時に役立つものばかりです。
テンプレート階層
WordPressのテーマを一から作る場合はこのテンプレート階層を理解していないといけません。
WPQuery
WPQueryを使用して投稿情報を取得することがありますが、その際条件を書く場合はこれらサイトを見れば大体書けます。
アクションフック
初心者が最初にアクションフックとはなんだとなると思いますが、頑張って学ばないとfunctions.phpがスカスカ、テンプレートファイルが肥大化というあとで後悔するテーマが完成します。頑張って覚えましょう。
その他
使い方を知っておいたほうがよいサービス
ホームページ制作全般でしっておくと良いサービスです。
Font Awesome
最近はバージョンが6になり使いずらくなりましたが、ブランドロゴなどを使用する際はfont awesomeでないと表示できないものが幾つかあります。
Material icons
使いやすくバリエーションも多いです。完全に無料なので覚えておいて損はないです。
Google fonts
フォント選定の際は必ず使用します。ダウロードでもCDNでも使用できるので便利です。
Adobe fonts
有料プランに入っていないと使用できるフォントは減ってしまいますが、フォントの多さは随一です。
日本語フォントが多いのでよく使用されます。
lottie
adobeからリリースされているアニメーションライブラリです。
QiitaのLGTMボタンのアニメーションもlottieが使用されています。
jQuery
もう古いなど言われますが、現場ではバリバリ現役というところは多いです。
基本的は書き方ぐらいは覚えておいたほうがよいです。
Slick
slickを採用しているところは多く、基本的な使い方ぐらいは知っておいたほうがよいです。
Swiper
Slickと同じぐらい採用されていると思います。スライダー系のプラグインはこの2つを覚えておけば良いと思います。
よく使用するWordPressプラグイン
WordPressでよく使用しるプラグインです。
ContactForm 7
お問い合わせフォームをプラグインで導入する際、採用率は断トツで１位だと思います。
使い方は覚えておいたほうがよいです。
All-in-One WP Migration
WordPressのバックアップやお引越しにすごく便利です。ローカルで作成したテーマを本番に移す場合数分で完了します。
自分の会社では本番環境へのインポートは投稿情報が差分で消えたりするミスが多かったで基本的に禁止していますが、本番環境をローカルで作成する際は毎回使用します。
Custom Post Type UI
カスタム投稿を作成する際便利なプラグインです。テーマからでもカスタム投稿の作成はできますが、初心者が練習でカスタム投稿を触ってみる場合などは使用すると良いと思います。
Advanced Custom Fields
カスタムタイプを作成する際便利なプラグインです。使用感が一番よかったのでこれがおすすめです。
Smart Custom Fields
あまりメジャーではないですが、カスタムフィールドはAdvanced Custom Fieldsとこのプラグインを併用するのがおすすめです。
Advanced Custom Fieldsでは繰り返しフィールドが有料オプションなので、繰り返しフィールドの時はこのプラグインを使用します。
Show Current Template
テーマ制作初心者の方はよく思ったテンプレートファイルと違ったとなることが多いと思います。
このプラグインは開いているページが現在なんのテンプレートが適用されているか確認できるプラグインです。
おわり
これからWordPressを始める方はまずテーマ制作からかかると思いますが、最近は便利なものが増えたのでいい感じのものが簡単につくれると思います。
頑張ってください。