クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事)

Webデザイナーが主戦場とするのはフロントエンド言語(HTML、CSS、JS)ですが、サーバサイド言語もわかればできることが増えます。一体どうやって??
WordPressはダッシュボードからテーマやプラグインを入れれば動的サイトが作れる素敵なCMS。一番身近なサーバサイド。これを入り口にサーバサイド言語(PHP、SQL文)の扉を叩いてみましょう!

※目次:

サーバサイドの中でのWordPressの位置付け

フロントエンド言語はブラウザでソースが見えます。デベロッパー(開発)ツールで細かい検証もできるオープンな世界。

でもサーバサイド言語はソースが見えない。ブラウザはサーバ上で動いた結果を受け取っているだけ。ブラックボックス。そこがとっつきにくさになっている。

まずは大枠から、サーバサイドを構成するプログラミング言語とデータベース言語。そしてサーバサイドの中でのWordPressの位置付けを解説します。

※参考:サーバサイドの中でのWordPressの位置付け - クモのようにコツコツと

idr-zz.hatenablog.com

PHPの基本を理解するためにJSと比較する

WordPressテーマのカスタマイズや自作テーマで避けて通れない「PHP」。サーバサイドのプログラミング言語の一つです。

フロントエンドのプログラミング言語「JS」と比較することで共通点、相違点が見えて理解が早まると思います。

※参考: PHPの基本を理解するためにJSと比較する - クモのようにコツコツと

idr-zz.hatenablog.com

ざっくりWordPress:PHP書式とテンプレートタグの識別-前編

PHPの基本的な書式が理解できたら次はWordPressのテーマフォルダのファイルを見てみましょう。

これまでワケワカメだったコードの塊が「PHP書式」と「テンプレートタグ」で書かれていることが見えてきます。

前編ではWordPressのファイル構成、「インクルードタグ」、「WordPressループ」について解説。「HTML」→「PHP」→「テンプレートタグ」の3ステップで見ていきます。

なお、対象はWordPressのデフォルトテーマ「Twenty Seventeen」の中身です。

※参考: ざっくりWordPress:PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと

idr-zz.hatenablog.com

ざっくりWordPress:PHP書式とテンプレートタグの識別-後編

ざっくりWordPress後編です。引き続きWordPressのデフォルトテーマ「Twenty Seventeen」を見る旅です。

前編のWordPressループでインクルードされていた記事部分のファイル「contents.php」を見ていきます。前編同様「HTML」→「PHP」→「テンプレートタグ」の3ステップです。

投稿のテンプレートタグ(条件分岐、取得、表示)、ヘッダーフッターのインクルードタグを解説。 header.php、footer.phpの必須タグ、functions.phpのテーマ独自メソッド、プラグインの独自メソッドも見ていきます。

※参考: ざっくりWordPress:PHP書式とテンプレートタグの識別-後編 - クモのようにコツコツと

idr-zz.hatenablog.com

SQL文はLocal by FlywheelのAdminerから慣れよう(WordPressのDB操作:その1)

PHPをある程度読み書きできるようになったら、次はDB(データベース)言語に触れてみたい。DB言語もいろいろあるが、WerdPressと関わり深いDB「MySQL」を操作する「SQL文」から入るのがいいと思います。

たまにバックアップファイルのエクスポートなどでサーバ上の「phpMyAdmin」を開くことがあると思います。でも、ちょっと触るには勇気がいる場所ですよねw

WordPressのローカル環境「Loacal by Flywheel」にある「Adminer」*1なら思う存分触っても大丈夫です。

まずはAdminerからエクスポートした「.sqlファイル」を開き、「SQL文」がどんな言語なのか見ていきます。

※参考: SQL文はLocal by FlywheelのAdminerから慣れよう(WordPressのDB操作:その1) - クモのようにコツコツと

idr-zz.hatenablog.com

AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2)

次に、Adminer上から実際に「SQL文」を書いてDB(MySQL)を操作してみましょう。 WordPressにに新規投稿した「我輩は猫である」の「猫」の字を「犬」にします。

SQL文を構成する「DDL」「DML」「DCL」。その中のDML(データ操作言語)の「SLECT文」で文字列を検索、「UPDATE文」で文字列を置換します。*2

※参考: AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2) - クモのようにコツコツと

idr-zz.hatenablog.com

最後に

サーバサイドのプログラミング言語、データベース言語はいろいろあるが、WebデザイナーはWordPressと馴染みが深い「PHP」「SQL文」から入るのが理解しやすいと思います。
WordPressも、テーマやプラグインのインストールでやりたいことが実現できないときは、PHPやSQL文が読み書きできる方がやれることが増えます。

PHPはプログラミング言語なのでJSと構造が似ています。Webデザイナーは
「HTML」→「CSS」→「JS」→「PHP」→「SQL文」→and more…
と進んでいくといいんじゃないでしょうかね。

まずはどんなサーバサイド言語がどんな動き方をして何ができるのかを体感するところからと思います。そのあとは言語ごとの書式(方言)の違いになってくるんだと思います。それではまた!


※参考:フロントエンド言語(HTML、CSS、JS)まとめはこちら
【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと

idr-zz.hatenablog.com

*1:phpMyAdminと同じくMySQLに接続するツール

*2:他に「INSERT文」「DELATE文」もあります