これからWordPressを触る初学者へ

新社会人となり、就職先でWordPressを触ることになったがあまり良く分からないよという初学者のための手引きです。
既にそれなりの知識があり、自分好みの環境があるよって方はそちらを使用して頂ければよいと思います。
この記事はWordPress初学者が参考になればという記事です。

初心者に覚えてほしいことを詰め込んだのでかなり多いですが、WordPressでの制作にはこんなものを使うことがあるのだとみて頂きたいです。

# ローカル環境
ローカル環境とは自分のPC内にWordPressを作成し動かすための環境です。
残念ながらWordPressはHTMLで作成したものとは違いPHPファイルをHTMLとして表示する環境がいります。

## LOCAL By Flywheel

https://localwp.com/

WindowsでもMacでもWordPressのローカル環境を作るなら``LOCAL By Flywheel``がおすすめです。
インストールが完了したら1分程でWordPressを立ち上げることができます。初心者がミスをしがちなデータベースの接続も全て行ってくれます。
WordPressをデータベースと接続する知識は何処かで必要になるかもしれませんが、最近のレンタルサーバーは簡単インストールがついている所が多いので初心者には取り敢えず必要な知識ではないので慣れてきてから学習すればよいと思います。

今でもGoogleで``WordPress ローカル環境``と調べると``XAMPP``での構築方法が紹介されますが、初心者問わずお奨めしません。

https://www.youtube.com/watch?v=uG9j73hSyKg

使い方は簡単ですが、動画を見たほうが早いので上記動画から確認してください。

# エディタ
エディタはプログラムを書いていくためのツールです。プログラマー向けの高機能メモ帳と思っていただいて大丈夫です。
様々なものがありますが、初心者は困って調べたらたくさんの記事がでてくる``VScode``がおすすめです。

## VScode

https://code.visualstudio.com/

VScodeはダウンロードしたらすぐに使用することができますが、``拡張機能``を追加することができるので使いやすく便利なものを入れておくと良いです。
個人的におすすめな拡張機能を紹介します。

### Japanese Language Pack for Visual Studio Code
VScodeを日本語化してくれます。

### PHP Intelephense
PHPを書く時に入力補完をしてくれたり、記述間違えを指摘してくれたりします。
初心者にありがちですが、やたら変数を用意し中には使っていない変数が放置などがありますが、使用していない変数を教えてくれたりなどいたり尽くせりです。

同じような拡張機能に``PHP IntelliSense``がありますが、こちらはインストール後に``php.exe``のパスを指定しなければいけないのでLocalByFlyweelを使用している場合はおすすめしません。
機能もほぼ一緒なので、``PHP Intelephense``のみ入れておけば良いと思います。

また、``Intelephense``はインストール時WordPressで用意された関数をサポートしていません。なのでVScode上で未定義の関数として指摘されてしまいます。

https://blog-and-destroy.com/36008

上記リンクから説明を読み拡張機能の設定を変更すれば直ります。

### [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でのテーマ作成中にたまにあるのですが、``プログラムは一応動いたが、汚いので後で書き直そう``とかそういった場面があります。
```php
// TODO: 汚いので〇〇日までに書き直す
function BeginnerCode() {

    // キレイではないコード

}
```
みたいな感じで``TODO``として書いておくと``Todo Tree``画面上で一覧として表示できます。``TODO``以外にも他の書き方ができます。
| 名前 | 意味 |
|:-:|:-:|
| TODO  | 後で追加、修正などが必要  |
| FIXME  | 不具合があるコード、修正必要  |
| HACK  | キレイじゃないコード、書き直しが必要  |
| XXX  | なぜ動くか分からないコード  |
| REVIEW  | 動くが見直しが必要  |
| OPTIMIZE  | 無駄が多く処理の負担になっている箇所  |
| CHANGED  | コード変更した内容  |
| NOTE  | 残す必要のあるメモ  |
| WARNING  | 注意が必要な箇所  |
| COMP※  | TODOが完了した内容  |

みたいな感じで他の人と共有する際や、納品後に残しておきたい内容など様々な場面で使えるひと手間です。
``COMP``はもともとなく僕自身が追加したものです。``Todo Tree``ではこのように自分独自のものも追加できます。僕はTODOが完了してからTODOを見直すことが多いのでこれを追加しています。

## テーマ

https://vscodethemes.com/

VScodeテーマの一覧が見れます。テーマを変えたところで効率は変わりませんが、気分が上がるのでお勧めです。

# ファイル転送ツール(FTP/SFTP)
最近ではGitからデプロイしたりとおしゃれな実装が多いので使う機会が減ってきていますが、使用する場面はでてくると思います。

https://filezilla-project.org/

FTPでもSFTPでも初心者なら``Filezilla``がおすすめです。
よくあるミスで、ファイルをアップロードする場所を間違えたとありますが、Filezillaには``同期ブラウジング``という機能があるので事前に防止することができます。

# Gitクライアント
Gitは会社などによりクライアントソフトが指定されていたり、そもそもクライアントソフトを使用しないところなどあると思いますが、個人的におすすめなGitクライアントは以下2つです。

## GitKraken

https://www.gitkraken.com/

プライベートリポジトリの操作は有料だったりとしますが、かなり使いやすくおすすめです。

## Sourcetree

https://www.sourcetreeapp.com/

Bitbucketを使う場合はかなり使いやすいです。
僕も最初はSourcetreeを使用していました。たまに認証がうまくできなく使用できなくなるとかのトラブルがありますが使いやすいのでお勧めです。

# WordPress学習
WordPressとはなんぞやというところはここで説明するときりがないのでかいつまんで読んでおくといいよっていうサイトなりをまとめました。
なお、基本的にテーマ制作の時に役立つものばかりです。

## テンプレート階層
WordPressのテーマを一から作る場合はこのテンプレート階層を理解していないといけません。

https://snownotes.org/what-is-template-file-and-hierarchy/

https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/


## WPQuery
WPQueryを使用して投稿情報を取得することがありますが、その際条件を書く場合はこれらサイトを見れば大体書けます。

https://ecco.co.jp/blog/wp_query/

https://notnil-creative.com/blog/archives/1288

## アクションフック
初心者が最初にアクションフックとはなんだとなると思いますが、頑張って学ばないとfunctions.phpがスカスカ、テンプレートファイルが肥大化というあとで後悔するテーマが完成します。頑張って覚えましょう。

https://coosy.co.jp/blog/wordpress-hook/

https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7

## その他

https://jobtech.jp/wp/2296/

https://wp.go-sign.info/how-to-enable-wordpress-debug-mode/

# 使い方を知っておいたほうがよいサービス
ホームページ制作全般でしっておくと良いサービスです。

## Font Awesome

https://fontawesome.com/

最近はバージョンが6になり使いずらくなりましたが、ブランドロゴなどを使用する際はfont awesomeでないと表示できないものが幾つかあります。

## Material icons

https://fonts.google.com/icons

使いやすくバリエーションも多いです。完全に無料なので覚えておいて損はないです。

## Google fonts

https://fonts.google.com/

フォント選定の際は必ず使用します。ダウロードでもCDNでも使用できるので便利です。

## Adobe fonts

https://fonts.adobe.com/

有料プランに入っていないと使用できるフォントは減ってしまいますが、フォントの多さは随一です。
日本語フォントが多いのでよく使用されます。

## lottie

https://lottiefiles.com/

adobeからリリースされているアニメーションライブラリです。
QiitaのLGTMボタンのアニメーションも``lottie``が使用されています。

## jQuery

https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2570

もう古いなど言われますが、現場ではバリバリ現役というところは多いです。
基本的は書き方ぐらいは覚えておいたほうがよいです。

## Slick

https://kenwheeler.github.io/slick/

slickを採用しているところは多く、基本的な使い方ぐらいは知っておいたほうがよいです。

## Swiper

https://swiperjs.com/

Slickと同じぐらい採用されていると思います。スライダー系のプラグインはこの2つを覚えておけば良いと思います。

# よく使用するWordPressプラグイン
WordPressでよく使用しるプラグインです。

## ContactForm 7

https://ja.wordpress.org/plugins/contact-form-7/

お問い合わせフォームをプラグインで導入する際、採用率は断トツで１位だと思います。
使い方は覚えておいたほうがよいです。

## All-in-One WP Migration

https://ja.wordpress.org/plugins/all-in-one-wp-migration/

WordPressのバックアップやお引越しにすごく便利です。ローカルで作成したテーマを本番に移す場合数分で完了します。
自分の会社では本番環境へのインポートは投稿情報が差分で消えたりするミスが多かったで基本的に禁止していますが、本番環境をローカルで作成する際は毎回使用します。

## Custom Post Type UI

https://ja.wordpress.org/plugins/custom-post-type-ui/

カスタム投稿を作成する際便利なプラグインです。テーマからでもカスタム投稿の作成はできますが、初心者が練習でカスタム投稿を触ってみる場合などは使用すると良いと思います。

## Advanced Custom Fields

https://ja.wordpress.org/plugins/advanced-custom-fields/

カスタムタイプを作成する際便利なプラグインです。使用感が一番よかったのでこれがおすすめです。

## Smart Custom Fields

https://ja.wordpress.org/plugins/smart-custom-fields/

あまりメジャーではないですが、カスタムフィールドは``Advanced Custom Fields``とこのプラグインを併用するのがおすすめです。
``Advanced Custom Fields``では繰り返しフィールドが有料オプションなので、繰り返しフィールドの時はこのプラグインを使用します。

## Show Current Template

https://ja.wordpress.org/plugins/show-current-template/

テーマ制作初心者の方はよく思ったテンプレートファイルと違ったとなることが多いと思います。
このプラグインは開いているページが現在なんのテンプレートが適用されているか確認できるプラグインです。

# おわり
これからWordPressを始める方はまずテーマ制作からかかると思いますが、最近は便利なものが増えたのでいい感じのものが簡単につくれると思います。
頑張ってください。