「コーディングまでしたけどWordPress化するには最初何をすれば良いかイメージできない」
「なぜかCSSやJS、画像などが読み込まれずテキストのみの表示になる時がある」
「Googleフォントのような外部ライブラリはどのようにして導入すれば良いかわからない」
本日はそんな方に向けてWordPressでパスを通す方法を解説していきます。
WordPressを使ってウェブサイトを構築する際、外部のスタイルシートやアイコンフォント、さらにはGoogleフォントを組み込むことは一般的な作業です。
しかしこれらのリソースを正しく取り込むためには、適切な方法を知っておくことが重要です。
この記事ではWordPressでCSSやFontAwesome、そしてGoogleフォントをウェブサイトに組み込むための効果的な方法について詳しく解説します。
wp_enqueue_style関数やget_template_directory_uri関数を使ってパスを確実に通しスムーズにウェブサイトに統合する手順をご紹介します。
WordPressの機能を最大限に活用し、ウェブサイトのデザインとパフォーマンスを向上させるための方法について学んでいきましょう。
また動画もあるので必要な方は以下よりご覧ください。
WordPressで外部ファイルやライブラリのパスを通す方法
まずはテンプレートファイルを作るところから始まるかと思います。
テンプレートファイルまで完成したらテキストのみの画面表示になっているので、CSSとJSファイルを読み込むことと画像を表示できるようにするステップに移るはずです。
WordPressでCSSや画像のパスを通す方法
WordPressではコーディング時に書いていた「”./css/style.css”」のような相対パスを読み込むことができません。
WordPress自体が複雑なフォルダ構成になっていて、実際にはthemesフォルダに行かないとコーディングしたファイルや画像素材に辿り着けないからです。
そこでテンプレート関数でget_template_directory_uri()というものがあり、こちらの関数が「themesフォルダまでのパス」を返してくれます。
そのため以下のようにするとCSSファイルが反映されることになります。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/b4cc5d2f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--ここ-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
<title>Document</title>
<?php wp_head();?>
</head>画面をリロードするとCSSが反映されているかと思います。
また検証ツールでlinkタグを探してみると以下のようなURLが自動で挿入されているはずです。
「http://localhost:8888〜〜」の部分はコードでは書いていませんが、get_template_directory_uri関数の戻り値として自動で挿入されるためパスが通ります。
WordPressでGoogleフォントやFontAwesomeを通す方法
ちなみにGoogleフォントやFont-Awesomeなどの外部ライブラリのURLは絶対パスになっているので何もしなくても反映されます。
同じheadタグに書いてあるかと思いますが、そのままで大丈夫です。
一方でfunctions.phpの設定として書く方法もあるので併せて紹介しておきます。
GoogleフォントとFont-AwesomeをheadタグにURLを書かない場合はfunctions.phpで以下のように書きます。
<?php
function init_script(){
// linkタグのid名、ファイルURL(GoogleFontsのhrefの部分)
wp_enqueue_style("googlefonts", "https://fonts.googleapis.com/css2?family=Protest+Revolution");
// linkタグのid名、ファイルURL(Font-AwesomeのCSSの部分)
wp_enqueue_style("fontawesome", "https://use.fontawesome.com/releases/v6.5.0/css/all.css");
}
add_action("wp_enqueue_scripts", "init_script");
?>wp_enqueue_styleというテンプレート関数があり、第一引数にidの値、第二引数にURLを記載します。
またwp_enqueue_styleを使った関数はadd_actionではwp_enqueue_scriptsイベントを指定することで発動します。
functions.phpにこのようなパスを定義することによるメリットとしては、header-〇〇.phpのようにヘッダーテンプレートが複数あるときに1回だけ書けば良い点です。
WordPressにファビコンを設定する方法
ブラウザのタブにアイコンをつけるのことをファビコン画像と呼びます。
ブラウザにもいろんな種類がありパソコンとスマホでサイズも変えないといけないので、意外とファビコン画像の設定は骨が折れる作業です。
本記事では便利サイトとしてファビコンジェネレータを紹介します。
https://realfavicongenerator.net/
サインアップしたら「Select your Favicon Image」をクリックしてファビコン画像として使いたい画像素材を選択しましょう。
拡張子はpngかjpgのものが良いでしょう。
ファビコン画像への変換が完了したら画面下部にある「Generate your Favicons and HTML code」をクリックします。
画面が切り替わりますので「Favicon Package」というボタンをクリックするとファビコン画像のセットがZIP形式でダウンロードされますので解凍します。
解凍したフォルダをそのまま作業ディレクトリの画像を保存しているフォルダに格納しましょう。
さらに画面に表示されていたHTMLコードをコピペしてheader.phpのheadタグに入れます。
<!DOCTYPE html>
<html lang="jp">
<head>
<!-- 中略 -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/img/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_template_directory_uri();?>/img/favicon/site.webmanifest">
<link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<?php wp_head();?>
</head>こちらは相対パスに切り替える必要がありますので、linkタグのhref属性はget_template_directory_uri関数を使用します。
上記のコードを参考にしてください。
そうするとファビコンが設定されます。
分割したテンプレートファイルを読み込む方法
WordPressではテンプレートファイルの一部を切り取って細かく分割することができます。
サイトのページ数が多くなったり、1ページあたりのコンテンツが多くなるにつれ「共通したレイアウト」が登場します。
それをコピペで複製していくのも良いですがテンプレートファイルの中で部分的に分割して再利用できるような仕組みになっています。
分割したコードは新しいPHPファイルに保存しておき、get_template_part関数の引数にパスを指定することでどこでも呼び出すことができるわけです。
以下の例はheader.phpの中でヘッダーメニューの部分を分割してheader-menu.phpとしているパターンです。
<!DOCTYPE html>
<html lang="jp">
<head>
<!-- 中略 -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/img/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_template_directory_uri();?>/img/favicon/site.webmanifest">
<link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<?php wp_head();?>
</head>
<body>
<!-- 元々はここにヘッダーメニューを書いていた -->
<?php get_template_part("includes/header-menu");?> <header class="header">
<input type="checkbox" id="menu_toggle" class="menu_checkbox" hidden>
<label for="menu_toggle" class="menu_hamburger">
<span class="bar"></span>
</label>
<div class="header_top">
<div class="header_inner">
<h1 class="header_title">
<a href="./index.html">
<?php bloginfo("name");?>
</a>
</h1>
</div>
<form action="#" method="get">
<input type="text" name="s" value="<?php the_search_query();?>" placeholder="検索">
</form>
</div>
<div class="header_bottom">
<div class="header_inner">
<?php
$locations = get_nav_menu_locations();
$header_menu = wp_get_nav_menu_object($locations["header_nav"]);
$header_menu_items = wp_get_nav_menu_items($header_menu->term_id);
?>
<nav class="header_nav">
<ul class="header_nav-1">
<!-- 現在のパスを取得して引数の相対パスからURLを作成する -->
<!-- <li><a href="<?php echo esc_url(home_url('/'));?>">ホーム</a></li>
<li><a href="<?php echo esc_url(home_url('/category/js'));?>">ブログ</a></li>
<li><a href="<?php echo esc_url(home_url('/'));?>">プログラミング</a></li>
<li><a href="<?php echo esc_url(home_url('/'));?>">RPA</a></li>
<li><a href="<?php echo esc_url(home_url('/'));?>">メンタル</a></li>
<li><a href="<?php echo esc_url(home_url('/'));?>">キャリア活動</a></li>
<li><a href="<?php echo esc_url(home_url('/'));?>">コンテンツ</a></li> -->
<?php foreach ($header_menu_items as $item) : ?>
<li>
<a href="<?php echo esc_attr($item->url); ?>">
<?php echo esc_html($item->title); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<ul class="header_nav-2">
<li><a href="#"><span class="sns_icon"><i class="fab fa-instagram"></i></span></a></li>
<li><a href="#"><span class="sns_icon"><i class="fab fa-twitter"></i></span></a></li>
<li><a href="#"><span class="sns_icon"><i class="fab fa-facebook-f"></i></span></a></li>
<li><a href="#"><span class="sns_icon"><i class="fas fa-globe-americas"></i></span></a></li>
</ul>
</nav>
</div>
<div class="header_nav-3">
<a href="#"><span class="sns_icon"><i class="fas fa-user-alt"></i></i></span></a>
</div>
</div>
</header>分割したファイルはincludesのような専用のフォルダを作って保存しておくとわかりやすいです。
get_template_partの引数の使い方で注意点としては、拡張子を含めてはいけないことです。
get_template_part(“includes/header-menu.php”)では正常に表示されませんので、get_template_part(“includes/header-menu”)とする必要があります。
WordPressには前章で紹介したget_template_directory_uriのようにパスを指定する関数があるのですが、拡張子まで指定するものと指定しないものがありますので注意しましょう。
WordPressでアイキャッチ画像、RSSフィード、タイトルタグを有効化する方法
続いてはWordPress化するときにfunctions.phpでよくやる事前の設定についてです。
前章で外部ファイルのパスを通しましたが、他にも事前に設定しておくべきことがあります。
まずは投稿画面からアイキャッチ画像の設定ができるようにすることは以下のようにします。
<?php
function init_script(){
wp_enqueue_style("googlefonts", "https://fonts.googleapis.com/css2?family=Protest+Revolution");
wp_enqueue_style("fontawesome", "https://use.fontawesome.com/releases/v6.5.0/css/all.css");
// ここ
add_theme_support('post-thumbnails');
}
add_action("wp_enqueue_scripts", "init_script");
?>
WordPressではデフォルトでアイキャッチ画像の設定ができるようになっていないので、上記コードを書いてアイキャッチ画像を設定できるようにすることになります。
WordPressで投稿した記事のRSSを設定する
同じようなものでRSSフィードの有効化があります。
<?php
function init_script(){
wp_enqueue_style("googlefonts", "https://fonts.googleapis.com/css2?family=Protest+Revolution");
wp_enqueue_style("fontawesome", "https://use.fontawesome.com/releases/v6.5.0/css/all.css");
add_theme_support('post-thumbnails');
// ここ
add_theme_support('automatic-feed-links');
}
add_action("wp_enqueue_scripts", "init_script");
?>RSSフィード自体はWordPressで自動生成されるのですが、配信を有効化していないとユーザーに通知が行きません。
そこで上記のコードでRSS配信を有効化します。
サイトのページ上にRSSまでのリンクを貼りたいときにはbloginfo(“atom_url”)という関数をaタグのhref属性に埋め込みましょう。
以下の例はフッターにRSSまでのリンクを貼っています。
<div class="footer_bottom">
<a style="color: #fff;" target="_blank" href="<?php bloginfo("atom_url");?>">RSS</a>
</div>WordPressでtitleタグとmetaタグのdescriptionを設定する
その他には記事ごとに、titleタグの値を記事タイトルとして動的に変更することもやっておきましょう。
<?php
function init_script(){
wp_enqueue_style("googlefonts", "https://fonts.googleapis.com/css2?family=Protest+Revolution");
wp_enqueue_style("fontawesome", "https://use.fontawesome.com/releases/v6.5.0/css/all.css");
add_theme_support('post-thumbnails');
add_theme_support('automatic-feed-links');
// ここ
add_theme_support('title-tag');
}
add_action("wp_enqueue_scripts", "init_script");
?>以上のような設定をしているのがadd_theme_supportというテンプレート関数です。
引数に指定のキーワードを文字列で入れると自作テーマに反映することができます。
add_theme_supportを含んだ関数はadd_actionでwp_enqueue_scriptsというイベント名で実行するようにします。
一方でtitleタグを全てのページに共通にしても大丈夫なときは、管理画面の一般設定に入力されるものが自動出力されるbloginfo(“name”)をtitleタグのテキストにすると良いでしょう。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 中略 -->
<title><?php bloginfo("name");?></title>
<!-- 中略 -->サイトのタイトルと同じくメタディスクリプションも管理画面にあるものを自動出力させることが可能で、bloginfo(“description”)を使用します。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 中略 -->
<title><?php bloginfo("name");?></title>
<!-- ここを追加 -->
<meta name="description" content="<?php bloginfo("description");?>" />
<!-- 中略 -->サイトタイトル、メタディスクリプションは管理画面の設定→一般設定に進むと入力欄があります。
こちらで入力して保存された値がそれぞれリアルタイムに更新される仕組みです。
記事ごとにtitleタグを変更したいのか、全て統一で良いのかはサイトの運営方法によって変わります。