FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

オリジナルテーマ作成から深掘りするWordPress その2

投稿日:

前回、index.htmlからindex.phpへ変更した時にstyle.cssやimgのパスを変更しました。パスをエディタソフトで書き換えましたが、WordPressには便利な関数があります。今回はこれを使ってパスを書き換えます。

miku-nosuke

この記事を読むことで、テンプレートタグについて理解することが出来ます。
WordPressで予め用意されている関数をつかうことで便利になります。

テンプレートタグ

前回、index.phpにファイル変更した時に stylesheetのパスを以下の様に書き換えました。同様にimgファイルのパスも変更しています。

<link rel=”stylesheet” href=”css/style.css”> を
<link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”> 

imageは
<img src=”images/MV.jpg”> を
<img src=”http://sample.local/wp-content/themes/sampleTheme/images/MV.jpg”> に

このように、長い記述をコピペしたりするわけです。これって、結構面倒ですし、ミスしそうだし。そこで、テンプレートタグの登場です。

get_template_directory_uri()

 テンプレートタグ?なんだろう、それは八百屋で買えますか?こんな風に思いました。いろいろと調べてみるとテンプレートタグとはwpで用意した関数のようです。したがって八百屋では買えないようです。関数とは、面倒な処理をまとめてパッとやってくれるようにしたモノと思ってください。
 前述の例でいうと面倒な処理とは『長ったらしいパスを調べてコピペする』となります。そこで、get_template_directory_uri()というテンプレートタグを使います。今いちどコードを見てみましょう。

  • <link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”>
  • <img src=”http://sample.local/wp-content/themes/sampleTheme/images/MV.jpg”> 

二つのコードを見比べてみると太字の部分、
http://sample.local/wp-content/themes/sampleTheme
は同じです。この部分を書き出すためにget_template_directory_uri()をつかいます。具体的にはそれぞれ、

  • <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/style.css”>
  • <img src=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/iamges/MV.jpg”>

と書きます。少し説明すると、
<?php はphp文であることの宣言で ?> までがphp文となります。テンプレートタグはphpで書かれた関数なので宣言する必要があります。

echo はphpでもともと用意されている関数で出力せよという意味になります。

get_template_directory_uri() は有効化している テンプレート ディレクトリの URI を取得するということです。

以上を踏まえて

  • <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/style.css”>と書くことで、
  • html上では<link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”>と出力されます。

ここまでをまとめると

  • テンプレートタグとはwp側で用意した関数
  • get_template_directory_uri()はテンプレート ディレクトリの URI を取得する
  • テンプレートタグを使用する時はphpの宣言をする

今回はここまでです。次回テンプレートファイルとは。

Follow me!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。 htmlの基礎知識(コードを書いたことがある)cssの基礎知識VS codeなど …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

オリジナルテーマ作成から深掘りするWordPress その1

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので …

オリジナルテーマから深掘りするWordPress その4

今回はテンプレートファイルのお作法について学習したことを書きます。お作法を施すことでよりWordPressっぽくなります。 miku-nosuke この記事を読むことでwp_head()、blogin …

no image

シンプルな例でFLOCSSについて考えた

皆さんこんばんは。RasieTechのWordPressコースmiku-nosukeです。今回の記事はCSS設計です。いままで見て見ぬふりをしてきました。しかし、CSS設計は避けては通れない道。ココを …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP