【 WordPress ＃3 】 「 パスの書き方 」FirE♯534

WordPressでのサイト構築をHTMLサイトからの移行ではなく、始めから WordPressで行うことを目的にした記事です。

今回は、
WordPressで、HTMLでのコードの書き方と、違う書き方をする必要があるところを解説します。

コピペで使えは問題ないのです。

しかし、何をやっているのか理解しておくと使い所に工夫ができるので、
解説していきます。

前回の記事

【 パスの書き方 】

HTML：相対パス
WordPress：絶対パス

■ HTML 相対パス

相対パスとは、ファイルなどの所在を書き表すパス（path）の表記法の一つで、現在位置からの相対的な位置関係を記述する方式。起点となる位置から目的の位置までの道筋にある要素を順に並べて記述する。

https://e-words.jp/

HTMLであれば、
[ index.html ]から [ style.css ]へリンクする場合。

このように書きます。

<link rel="stylesheet" href="css/style.css">

[ index.html ]から見て、cssフォルダの中の、[ style.css ]とリンクするという書き方です。これは、相対パスという書き方です。

■ WordPress 絶対パス

絶対パスとは、ファイルなどの所在を書き表すパス（path）の表記法の一つで、階層構造の頂点（最上位階層）からの位置関係を記述する方式。

https://e-words.jp/

WordPressで[ style.css ]へリンクする場合の書き方です。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

これは、やり方のひとつなので、何個かやり方があります。
ただ、考え方は同じです。これは絶対パスになっています。

PHPのコードは、ブラウザで表示するときにコードを書き換えてくれるという特徴があります。

上記のコードは、ブラウザでみると、このように書きかわります。

<link rel="stylesheet" href="http://localhost:10073/wp-content/themes/clover-clover/css/style.css">

書き変わったのは、この部分ですね。

<?php echo get_template_directory_uri(); ?>

↓↓↓↓↓↓↓↓↓↓↓↓

http://localhost:10073/wp-content/themes/clover-clover/css

■ コード解説

<?php echo get_template_directory_uri(); ?>

これの意味を解説します。

<? php ・・・・・?>　
→このカッコ内は、phpのコードですという意味。

echo 　
→表示するという意味

get_template_directory_uri(); 
→WordPress独自のコードで、テンプレートタグと呼ばれます。

get_template_directory_uri(); を直訳すると、
「取ってこい！テンプレートのあるディレクトリのURIを！」です。

LOCALを使って、ローカル環境で作業しているので、

「テンプレートのあるディレクトリのURI」とは、こちらです。
"http://localhost:10073/wp-content/themes/clover-clover"

このように、
PHPのコードは、取得(get) する内容を指定して、表示(echo)するという機能が多く使われます。

【 パスの書き換え 】

HTMLで静的サイトを作って、WordPressへ移行する場合には、
”書き換え” パスの書き換えが必要になります。

大規模なサイトになると、これが非常に手間なので、私は、始めから WordPressでのサイト設計をおすすめします。

ここでは、わかりやすくするために、HTMLタグからの書き換えという形で、パスの違いを解説します。

■ パスが変わる場所

相対パスを絶対パスへ書き換える箇所は、リンクを使っている所です。

基本的には、この場所になります。

CSSへのリンク（他のファイルへのリンク）
imgタグのリンク
aタグのリンク

■ CSSへのリンク（他のファイルへのリンク）

・HTML

<link rel="stylesheet" href="css/style.css">

・WordPress

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

↓↓↓↓書き変わり後↓↓↓↓

<link rel="stylesheet" href="http://localhost:10073/wp-content/themes/clover-clover/css/style.css">

■ imgタグのリンク

・HTML

<img src="img/○○○.jpg" alt="画像">

・WordPress

<img src="<?php echo get_template_directory_uri(); ?>/img/○○○.jpg" alt="画像">

↓↓↓↓書き変わり後↓↓↓↓

<img src="http://localhost:10073/wp-content/themes/サイト名/img/○○.jpg" alt="画像">

■ aタグのリンク

・HTML

 <a href="service.html">業務案内</a>

・WordPress

 <a href="<?php echo home_url('/service'); ?>">業務案内</a>

↓↓↓↓書き変わり後↓↓↓↓

<a href="http://localhost:10073/service">業務案内</a>

【 テンプレートタグ 】

種類が多い
使い方は人それぞれ

絶対パスを書くときに使うPHPのコードは、
WordPress独自のテンプレートタグと呼ばれるコードです。

 WordPressのテンプレートタグは、非常に多く存在しますので、
覚える必要はありません。

また、今回紹介したテンプレートタグ以外を使って、同じ情報を取得することもできます。

つまり、
こんなことできるんじゃないか？
こんなことできるタグがあったな？

と、調べることができれば良いのです。

プログラミングは、暗記することとは真逆の作業と思ってください。

調べて解決する力が必要です。

【 オープンソース 】

ソフトウェアの設計図にあたるソースコードを無償で公開し、誰でも自由にそのソフトウェアを使用、複製、改良、再配布できるようにすること。

WEBの世界は、オープンソースという考えに沿って、WEBサイトのコードすら誰もが見ることができます。

 WordPressをローカル環境にダウンロードして自由に使えるのも、
 WordPressがオープンソースという理念に沿っているからです。

技術をオープンに、共有することで、「車輪の再発明」を避けることができ、WEB業界の進化は、他を圧倒することができました。

この考え方は、ぜひ知っておいた方が良いので、過去の記事から一部

■ 暗記不要 

プログラミングや、マークアップの、勉強は、学校の勉強とは違います。

テストで点数を取るための勉強では意味がないわけです。

基本のルールというのは、守らなければなりませんので、
そこは、覚えるというか、慣れる必要があります。

そして、テストとは違って、わからなければ、調べれば良いのです。

自分で調べて、掴みに行く学習にこそ、意味があります。

ただただ与えられる学習場合、
「さぁ、では、自分でやってみましょう。」
となった時に、キーボードに置いた指が動かないのです。

「あれ？何したらいいんやっけ！？」
となってしまいます。

■ 車輪の再発明 

わからないことを調べて、誰かのコードを、使わせていただくことは、なんかパクってるようで、意識高い人は許せないかもしれません。

しかし、「車輪の再発明」という言葉があるように、すでに便利なものは、
１から作っていたら時間の無駄です。（仕組みの理解は必要）

この、車輪の再発明という言葉は、料理で考えるとわかりやすいです。

一流のシェフが料理する時、材料となる
野菜は、種から育てるでしょうか？　
魚は、海で釣り上げるでしょうか？　
肉は、家畜を育てるでしょうか？

また、料理の道具。
包丁、まな板、鍋、フライパンは、自分で作るでしょうか？

そのような物を１から作っていたら、
その人の、料理の腕は、いつになったら披露できるのでしょうか。

コードを調べて、組み合わせて、応用するのは、
料理のように、野菜と肉をフライパンで炒めて一つの料理にするようなものなのです。

炒める時間や、具材の大きさ、調味料の加減、盛り付け方なんかは、
どうやっても、個性が出ます。

コードの書き方にも、個性が出るし、汎用性の高い、美しいコードを書くには、経験が必要だと思います。

このように、一見、パクリと言われそうなことも、視点を変えれば当たり前のことなのです。

ITの進化の加速の裏には、このような、車輪の再発明はするなという概念や、オープンソースという考えがあります。

私は、マークアップはある程度、自分で考えて、書くことができますが、

プログランミグ言語については、読めるが、考えて書けていないと感じます。

【 まとめ 】

 WordPressの絶対パスの書き方について解説しました。

紹介したコードは、私もメモアプリなどの保存して、コピペして使っています。

「車輪の再発明」は、せずに、WEBにある便利なものは、積極的に使うこと、実現したいものを実装するために必要なことも調べてgetすることが、コーディングや、プログラミングにおいては、重要なことです。

次回は、 WordPressでサイト作り始めるときの、ファイルのセットを公開します。

最後に、html、cssを書くことを「プログラミング」と言う人がいますが、全然違います。
これは、プログラムを書ける人に敬意を表する意味でも、分けて考えるべきです。