【WordPress】サイトマップのデザインの変更方法（全１ステップ） [WordPress]
サイトマップのデザインを変更したい
サイトマップは、あなたのサイトにどんなページがあるのか、一覧してみることができるものですね。そのような利便性を提供するだけでも良いのですが、それだけでなく、あなたのサイトのイメージに合ったデザインにしたいものですよね。
そこで、今回はサイトマップのデザイン（スタイル）を変更する方法をお伝えします。
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
| プラグイン | PS Auto Sitemap |
スポンサードリンク
では、早速特定のサイトマップのデザイン（スタイル）の変更方法をお伝えします。
この記事では、「PS Auto Sitemap」というプラグインを使っています。
サイトマップの作り方については、「【WordPress】サイトマップの作り方（全３ステップ）」を御覧ください。
サイトマップから特定の記事を除外する方法は、「【WordPress】サイトマップから特定の記事を除外する方法（全２ステップ）」をご覧ください。
では、順番に見ていきましょう
【目次】
1. サイトマップの設定をする
サイトマップの設定でデザインを変更します。
[設定]メニューにマウスカーソルを重ねる
[PS Auto Sitemap]メニューを左クリックする
WordPressの管理画面（ダッシュボード）を開くと、上記画像のように、左側にメインメニューが表示されます。左側のメインメニューから、[設定]メニュー（上記画像の左の赤丸の箇所）を探し、マウスカーソルを重ねましょう。次に、[PS Auto Sitemap]メニュー（上記画像の右の赤丸の箇所）を左クリックしましょう。
下記画像のように、「PS Auto Sitemap」の設定ページが開きます。
スタイルを選ぶ
[スタイルの変更]のドロップダウンメニュー（上記画像の赤丸の箇所）から、お好みのスタイルを選びましょう。
[変更を保存]ボタンを左クリックする
あとは、[変更を保存]ボタン（上記画像の赤丸の箇所）を左クリックしましょう。
これで、サイトマップの設定は完了です。
2. サイトマップのデザインの紹介
デザインの設定方法をご理解いただけたところで、どのようなデザインがあるのかを５つご紹介します。ちなみに、全部で１４個あります。
■１．シンプル
■２．付箋
■３．矢印
■４．ビジネス
■５．キューブ
お好みのデザインはありましたか。
では、かっこいいサイトを作ってください！
スポンサードリンク
【WordPress】サイトマップから特定の記事を除外する方法（全２ステップ） [WordPress]
サイトマップに特定のページを表示したくない
サイトマップを作っていて、隠しておきたいページがサイトマップに表示されてしまって困っていませんか。例えば、特別会員様限定のページで、一般の方からは隠しておきたいページなどは、サイトマップには載せたくないですね。
そこで、今回は特定の記事をサイトマップから除外する方法をお伝えします。
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
| プラグイン | PS Auto Sitemap |
スポンサードリンク
では、早速特定の記事の除外方法をお伝えします。
この記事では、「PS Auto Sitemap」というプラグインを使っています。サイトマップの作り方については、「【WordPress】サイトマップの作り方（全３ステップ）」を御覧ください。
では、順番に見ていきましょう
【目次】
1. 除外ページのIDを調べる
１ステップ目は、除外するページの固定ページIDを調べましょう。
[固定ページ]メニューを左クリックする（下記画像の赤丸の箇所）
WordPressの管理画面（ダッシュボード）を開くと、上記画像のように、左側にメインメニューが表示されます。その中から、[固定ページ]を探し、左クリックしましょう。
固定ページタイトルにマウスカーソルを重ねる（下記画像の上の赤丸の箇所）
上記画像のように固定ページ一覧が表示されたと思います。
そしたら、ページIDを調べたいページのタイトル（上記画像の上の赤丸の箇所）の上に、マウスカーソルを重ねましょう。ブラウザの左下（上記画像の下の赤丸の箇所）にマウスカーソルを重ねたリンクのURLが表示されます。このURLの「post=xxx」の部分がページIDを表しています。上記の例では、「post=873」ですから、ページIDは873です。
※固定ページIDの調べ方を詳しく知りたい方は、「【WordPress】固定ページIDを調べる方法」を御覧ください。
2. サイトマップの設定をする
２ステップ目は、サイトマップの設定をします。
[設定]メニューにマウスカーソルを重ねる
[PS Auto Sitemap]メニューを左クリックする
左側のメインメニューから、[設定]メニュー（上記画像の左の赤丸の箇所）を探し、マウスカーソルを重ねましょう。次に、[PS Auto Sitemap]メニュー（上記画像の右の赤丸の箇所）を左クリックしましょう。
下記画像のように、「PS Auto Sitemap」の設定ページが開きます。
固定ページIDを記入する
[除外記事]の欄（上記画像の赤丸の箇所）に、「1. 除外ページのIDを調べる」で調べた固定ページIDを入力しましょう。複数のページを除外したい場合は、IDをカンマ区切りで入力しましょう。
[変更を保存]ボタンを左クリックする
あとは、[変更を保存]ボタン（上記画像の赤丸の箇所）を左クリックしましょう。
これで、サイトマップの設定は完了です。
3. 設定したサイトマップを確認する
では、サイトマップを確認してみましょう。
■設定前のサイトマップ
■設定後のサイトマップ
設定前のサイトマップには表示されていた「会員用申し込みページ」が、設定後のサイトマップには表示されていませんね。このように特定の記事を除外してサイトマップを作ることができます。
では、かっこいいサイトを作ってください！
スポンサードリンク
【WordPress】サイトマップの作り方（全３ステップ） [WordPress]
簡単にサイトマップを作りたい（３ステップ）
ホームページの内容が充実してきた人は、サイトマップを作りたくなりませんか。ページ数が増えてきて、ホームページを見に来てくれた人が、探しているページを見つけやすくなりますからね。
企業のホームページでは、だいたいサイトマップが用意されていますね。
そこで、今回はサイトマップの作り方を紹介します。
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
| プラグイン | PS Auto Sitemap |
スポンサードリンク
では、早速サイトマップの作り方をお伝えします。
ここでは、「PS Auto Sitemap」というプラグインを使った作り方を紹介します。サイトマップ用のプラグインはとてもたくさん提供されているので、気に成る方は他のプラグインも調べてみてくださいね。
では、順番に見ていきましょう
【目次】
1. プラグインを導入する
[プラグイン]メニューにマウスカーソルを重ねる（下記画像の左の赤丸の箇所）
[新規追加]メニューを左クリックする（下記画像の右の赤丸の箇所）
WordPressの管理画面（ダッシュボード）を開くと、上記画像のように、左側にメインメニューが表示されます。その中から、[プラグイン]を探し、マウスカーソルを重ね、[新規追加]を左クリックしましょう。
上記画像のようなページが開いたと思います。
検索キーワードに"ps sitemap"を入力する
プラグインを追加するページが開いたら、検索キーワードを入力する箇所（上記画像の右上の赤丸の箇所）に "ps sitemap" と入力しましょう。自動的に検索が開始され、検索結果が表示されます。
[今すぐインストール]ボタンを左クリックする
検索結果に「PS Auto Sitemap」が表示されたら、[今すぐインストール]ボタン（上記画像の左下の赤丸の箇所）を左クリックしましょう。
[有効化]ボタンを左クリックする
プラグインのインストールが完了すると、ボタン（上記画像の赤丸の箇所）が[有効化]に変わります。そしたら、[有効化]ボタンを左クリックしましょう。
プラグインの有効化が完了すると、自動的にインストール済みプラグインの一覧が表示されます。「PS Auto Sitemap」が表示されていることを確認しましょう（下記画像の赤丸の箇所）。
これで、プラグインの導入は完了です。
2. サイトマップページを作成する
ステップ２は、サイトマップ用のページを作成します。固定ページを作ったことがある方にとっては、読み飛ばしても良いくらいに簡単です。
[プラグイン]メニューにマウスカーソルを重ねる
[新規追加]メニューを左クリックする
左側のメインメニューから、[プラグイン]メニュー（上記画像の左の赤丸の箇所）を探し、マウスカーソルを重ねましょう。次に、[新規追加]メニュー（上記画像の右の赤丸の箇所）を左クリックしましょう。
下記画像のように、「新規固定ページを追加」ページが開きます。適当にページのタイトルを入力しましょう。
サイトマップ用のコメントを記入する
固定ページに下記のコメントを記入しましょう（上記画像の赤丸の箇所）。
<!-- SITEMAP CONTENT REPLACE POINT -->
固定ページを保存する
固定ページを保存しましょう。すぐに公開する場合は、[公開]ボタンを左クリックします。まずは下書き保存する場合は、[下書きとして保存]ボタンを左クリックします。すると下記画像のような画面に成ります。
ここで、固定ページID（上記画像の赤丸の箇所）をメモしておいてください。上記画像の例では、固定ページIDが849です。
3. プラグインの設定をする
さあ、最後のステップ（ステップ３）です。
このステップでは、サイトマップの設定を行います。
[設定]メニューにマウスカーソルを重ねる
[PS Auto Sitemap]メニューを左クリックする
左側のメインメニューから、[設定]メニュー（上記画像の左の赤丸の箇所）を探し、マウスカーソルを重ねましょう。するとサブメニューが表示されます。そこから、[PS Auto Sitemap]メニュー（上記画像の右の赤丸の箇所）を探し、左クリックしましょう。
サイトマップの設定画面が開いたと思います。
固定ページIDを入力する
サイトマップの設定画面には「サイトマップを表示する記事」という欄（上記画像の赤丸の箇所）があります。ここに、2. サイトマップページを作成するでメモしておいたページIDを入力しましょう。
[変更を保存]ボタンを左クリックする
あとは、[変更を保存]ボタン（上記画像の赤丸の箇所）を左クリックしましょう。
これで、プラグインの設定は完了です。
4. 完成したサイトマップを確認する
では、作成したサイトマップをみてみましょう。
こんな感じで、簡単にサイトマップが作成できました。
今回紹介したプラグインでは、他にも、サイトマップに載せたくないページを設定したり、スタイル（デザイン）を変更したりできます。それは下記の記事をご覧ください。
・【WordPress】サイトマップから特定の記事を除外する方法（全２ステップ）
・【WordPress】サイトマップのデザインの変更方法（全１ステップ）
では、かっこいいサイトを作ってください！
スポンサードリンク
【WordPress】固定ページIDを調べる方法 [WordPress]
ページIDを知りたい
・特定のページにだけ、スタイルシートを適用したい
・特定のページはサイトマップに載せたくない
WordPressでサイト運営(ブログ)をやっていて、こんなことを感じたことはありませんか。
ここで、特定のページを指定するときに使用するのが、ページIDです。IDを指定することで、そのページに対して様々な設定をすることができます。
では、どうやったらページIDを知ることができるでしょうか。IDの調べ方をお伝えします。
※投稿記事IDを調べる方法もあります。
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
スポンサードリンク
では、早速ページIDの調べ方をお伝えします。
調べ方には、下記のように2種類の方法があります。
方法１：固定ページ一覧から調べる
方法２：編集画面から調べる
あなたのお好みの方法を使って下さい。
では、順番に見ていきましょう
【目次】
1. 固定ページ一覧から調べる
[固定ページ]メニューを左クリックする（下記画像の赤丸の箇所）
WordPressの管理画面（ダッシュボード）を開くと、上記画像のように、左側にメインメニューが表示されます。その中から、[固定ページ]を探し、左クリックしましょう。
固定ページタイトルにマウスカーソルを重ねる（下記画像の上の赤丸の箇所）
上記画像のように固定ページ一覧が表示されたと思います。
そしたら、ページIDを調べたいページのタイトル（上記画像の上の赤丸の箇所）の上に、マウスカーソルを重ねましょう。ブラウザの左下（上記画像の下の赤丸の箇所）にマウスカーソルを重ねたリンクのURLが表示されます。このURLの「post=xxx」の部分がページIDを表しています。上記の例では、「post=873」ですから、ページIDは873です。
2. 編集画面から調べる
ページタイトルを左クリックする（下記画像の上の赤丸の箇所）
1. 固定ページ一覧から調べる において、固定ページ一覧を表示する方法をお伝えしました。固定ページ一覧が表示されたら、ページIDを調べたいページのタイトル（上記画像の上の赤丸の箇所）を左クリックしましょう。
上記画像のように、「固定ページを編集」画面が表示されます。ここで、ブラウザ上部に表示されるURLを見ましょう。このURLの「post=xxx」の部分がページIDを表しています。上記の例では、「post=873」ですから、ページIDは873です。
では、かっこいいサイトを作ってください！
スポンサードリンク
【WordPress】投稿記事IDを調べる方法 [WordPress]
投稿記事IDを知りたい
・特定の記事にだけ、スタイルシートを適用したい
・特定の記事はサイトマップに載せたくない
・特定の記事は「最近の投稿」に載せたくない
WordPressでサイト運営(ブログ)をやっていて、こんなことを感じたことはありませんか。
ここで、特定の記事を指定するときに使用するのが、投稿記事IDです。IDを指定することで、その記事に対して様々な設定をすることができます。
では、どうやったら投稿記事IDを知ることができるでしょうか。IDの調べ方をお伝えします。
※固定ページIDを調べる方法もあります。
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
スポンサードリンク
では、早速投稿記事IDの調べ方をお伝えします。
調べ方には、下記のように2種類の方法があります。
方法１：投稿一覧から調べる
方法２：編集画面から調べる
あなたのお好みの方法を使って下さい。
※プラグインによって、投稿一覧に常にIDが表示されるという方法もあります。そちらを知りたい方は、下記の記事を参考にしてください。
プラグインで常に記事IDを表示させる
では、順番に見ていきましょう
【目次】
1. 投稿一覧から調べる
[投稿]メニューを左クリックする（下記画像の赤丸の箇所）
WordPressの管理画面（ダッシュボード）を開くと、上記画像のように、左側にメインメニューが表示されます。その中から、[投稿]を探し、左クリックしましょう。
記事タイトルにマウスカーソルを重ねる（下記画像の上の赤丸の箇所）
上記画像のように投稿一覧が表示されたと思います。
そしたら、投稿記事IDを調べたい記事のタイトル（上記画像の上の赤丸の箇所）の上に、マウスカーソルを重ねましょう。ブラウザの左下（上記画像の下の赤丸の箇所）にマウスカーソルを重ねたリンクのURLが表示されます。このURLの「post=xxx」の部分が投稿記事IDを表しています。上記の例では、「post=871」ですから、投稿記事IDは871です。
2. 編集画面から調べる
記事タイトルを左クリックする（下記画像の上の赤丸の箇所）
1. 投稿一覧から調べる において、投稿一覧を表示する方法をお伝えしました。投稿一覧が表示されたら、投稿記事IDを調べたい記事のタイトル（上記画像の上の赤丸の箇所）を左クリックしましょう。
上記画像のように、「投稿の編集」画面が表示されます。ここで、ブラウザ上部に表示されるURLを見ましょう。このURLの「post=xxx」の部分が投稿記事IDを表しています。上記の例では、「post=871」ですから、投稿記事IDは871です。
では、かっこいいサイトを作ってください！
スポンサードリンク
【WordPress】スタイルシート(CSS)を特定のページに読み込む方法 [WordPress]
特定のページにだけ独自のスタイルシートを適用したい
WordPressでは、テーマを選ぶことで自分のサイトのデザインを変えることができますね。しかし、既存のテーマがあなたの要望に完全にピッタリとは限りませんね。レイアウトを調整したい、色を変えたいといったこともあると思います。
そんなときは、スタイルシート(CSSファイル)を作成し、追加で読み込ませましょう。
この記事では、サイト内の特定のページにだけ、スタイルシートを適用する方法をお伝えします。
※サイト全体にスタイルシートを適用する方法は、下記の記事を御覧ください。
【WordPress】スタイルシート(CSS)を読み込む方法
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
スポンサードリンク
【目次】
1. テーマのための関数(functions.php) を編集する
2. 編集箇所を特定する
3. コードを追記する
3-1. 特定の固定ページにスタイルシートを適用する
3-2. 特定の投稿ページ(記事)にスタイルシートを適用する
4. 読み込みを確認する
2. 編集箇所を特定する
3. コードを追記する
3-1. 特定の固定ページにスタイルシートを適用する
3-2. 特定の投稿ページ(記事)にスタイルシートを適用する
4. 読み込みを確認する
1. テーマのための関数(functions.php) を編集する
今回は、スタイルシートを読み込むための設定を、wordpressの管理画面から行う方法をお伝えします。
※詳しい方は、FTPを利用して、functions.phpファイルをダウンロードして編集するという方法のほうがオススメです。
それでは、WordPressの管理画面で「テーマのための関数」を開いていきます。
では、まずWordPressにログインしましょう。
画面左側にメニューが並んでいます。
[外観]にマウスカーソルを重ねる（上記画像の左の赤丸の箇所）
[テーマの編集]を左クリックする（上記画像の下の赤丸の箇所）
左側のメニューから、［外観］を探しマウスカーソルを重ねましょう。すると［外観］に関連するメニューが開くので、そこにある［テーマの編集］を左クリックしましょう。
上記のように「スタイルシート(style.css)」というファイルが開いたと思います。
テーマのための関数(functions.php)を左クリックする
右側のメニューから「テーマのための関数(functions.php)」を探し、左クリックしましょう。
上記のように、テーマのための関数(functions.php)が開いたと思います。
2. 編集箇所を特定する
テーマのための関数が開いたら、スタイルシートを読み込むコードを追記する場所を探しましょう。
wp_enqueue_scriptを検索する
ブラウザの機能を利用して、"wp_enqueue_script"というキーワードを検索しましょう。
Chromeでは、Ctrl+Fで検索ができます。
検索すると、上記画像のように、いくつかヒットすると思います。
今回の例では、テーマに「OnePress」を使用していますが、5件ヒットしました。このテーマの場合、onepress_scriptsというファンクションに、スタイルシートの読み込みコードが記述されています。テーマによって記載箇所が異なると思うので、検索してみてください。
/**
* Enqueue scripts and styles.
*/
function onepress_scripts() {
wp_enqueue_style( 'onepress-fonts', onepress_fonts_url(), array(), null );
wp_enqueue_style( 'onepress-animate', get_template_directory_uri() .'/assets/css/animate.min.css', array(), '1.0.0' );
wp_enqueue_style( 'onepress-fa', get_template_directory_uri() .'/assets/css/font-awesome.min.css', array(), '4.4.0' );
wp_enqueue_style( 'onepress-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css', false, '4.0.0' );
wp_enqueue_style( 'onepress-style', get_template_directory_uri().'/style.css' );
上記のコードを良く見てみましょう。wp_enqueue_styleで始まる各行の中に、xxx.cssという記述がありますね。次は、ここにあなたの独自のスタイルシートのファイル名を書いていきますよ。
追加コードを記述する箇所は、複数見つかったwp_enqueue_styleのうち、最後のものの後です。
3. コードを追記する
では、コードを追記しましょう。
wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );
では、wp_enqueue_styleの各引数を見ていきましょう。
・第1引数：スタイルシートを区別するハンドル名を指定します。上記の例では、my-styleを指定しました。
・第2引数：スタイルシートのURLを指定します。ここで、get_template_directory_uri()という関数を使用しています。この関数は、使用しているテーマのディレクトリを返します。末尾にスラッシュ( / )が含まれないことに注意してください。上記の例では、OnePressというテーマのディレクトリをget_template_directory_uri()で取得し、'/mystyle.css'という文字列と連結することで、スタイルシートのURLを指定しています。
※get_template_directory_uri()の詳しい説明はこちら↓
関数リファレンス/get template directory uri
※本記事では、wp_enqueue_styleに対して最低限の引数を指定した例を紹介しました。詳しく知りたい方はこちら↓
関数リファレンス/wp enqueue style
3-1. 特定の固定ページにスタイルシートを適用する
スタイルシートを読み込む方法がご理解いただけたところで、ここでは、特定の固定ページにのみ、スタイルシートを適用する方法をお伝えします。
3. コードを追記する において、追記したコードに条件分岐を追加しましょう。
if ( is_page(array(2, 5, 8)) ) {
wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );
}
固定ページかどうかを判別する関数は "is_page" です。
引数には、ページIDを指定します。（固定ページIDを調べる方法）
複数のページに適用したい場合は、上記の例のように配列にIDを入れて指定します。上記の例では、ページIDが2、5、8のページにのみスタイルシート(mystyle.css)が適用されます。
全ての固定ページに適用したい場合は、引数を省略しましょう。
※is_pageの詳しい説明は下記サイトをご覧ください。
関数リファレンス/is page
is_page の引数には、ID以外も指定できます。
3-2. 特定の投稿ページ(記事)にスタイルシートを適用する
特定のブログ記事にのみスタイルシートを適用したいときもあると思います。このような場合は、下記のように判別式を追加しましょう。
if ( is_single(array(3, 6, 9)) ) {
wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );
}
投稿ページかどうかの判別に使用する関数は "is_single" です。
引数には、投稿IDを指定します。（投稿記事IDを調べる方法）
複数のページに適用したい場合は、上記の例のように配列にIDを入れて指定します。上記の例では、投稿IDが3、6、9のページにのみスタイルシート(mystyle.css)が適用されます。
全ての投稿ページに適用したい場合は、引数を省略しましょう。
※is_singleの詳しい説明は下記サイトをご覧ください。
関数リファレンス/is_single
is_single の引数には、ID以外も指定できます。
スポンサードリンク
4. 読み込みを確認する
設定が正しいか確認してみましょう。
ページを右クリックする
判別式で指定したページをブラウザで開いたら、ページ上で右クリックをしましょう。下記画像のようにメニューが表示されます。
「ページのソースを表示」を左クリックする
表示されたメニューから、「ページのソースを表示」（上記画像の赤丸の箇所）を左クリックしましょう。ページのソースが表示されます。
ソースの中から、スタイルシートの記述を探しましょう。検索機能を使用して探しても良いです。上記画像のように、追加したスタイルシートのファイル名がソースに記述されていることが確認できれば成功です。
また、判別式で指定しなかったページについても、ページのソースを表示してみましょう。今度は逆に、追加したスタイルシートのファイル名がソースに記述されていないことが確認できれば成功です。
では、かっこいいサイトを作ってください！
スポンサードリンク
【WordPress】スタイルシート(CSS)を読み込む方法 [WordPress]
WordPressで作ったページに独自のスタイルシートを適用したい
WordPressでは、テーマを選ぶことで自分のサイトのデザインを変えることができますね。しかし、既存のテーマがあなたの要望に完全にピッタリとは限りませんね。レイアウトを調整したい、色を変えたいといったこともあると思います。
そんなときは、スタイルシート(CSSファイル)を編集しましょう。
あなたの使用しているテーマに用意されているスタイルシートを直接編集する方法もあります。もう1つの方法は、独自に作成したスタイルシートを追加で読み込ませる方法です。
今回はスタイルシートを追加で読み込ませる方法をお伝えします。
※ここでは、サイト全体にスタイルシートを適用する方法をお伝えします。
特定のページにのみスタイルシートを適用したい場合は、下記の記事を御覧ください。
【WordPress】スタイルシート(CSS)を特定のページに読み込む方法
まず、この記事でどんな環境を使用しているかを説明します。あなたのものと同じ、または、似ている場合は、ぜひこの記事を参考にしてくださいね。
【環境】
| 端末 | パソコン |
| OS | Windows 10 |
| ブラウザ | Chrome |
スポンサードリンク
【目次】
1. テーマのための関数(functions.php) を編集する
今回は、スタイルシートを読み込むための設定を、wordpressの管理画面から行う方法をお伝えします。
※詳しい方は、FTPを利用して、functions.phpファイルをダウンロードして編集するという方法のほうがオススメです。
それでは、WordPressの管理画面で「テーマのための関数」を開いていきます。
では、まずWordPressにログインしましょう。
画面左側にメニューが並んでいます。
[外観]にマウスカーソルを重ねる（上記画像の左の赤丸の箇所）
[テーマの編集]を左クリックする（上記画像の下の赤丸の箇所）
左側のメニューから、［外観］を探しマウスカーソルを重ねましょう。すると［外観］に関連するメニューが開くので、そこにある［テーマの編集］を左クリックしましょう。
上記のように「スタイルシート(style.css)」というファイルが開いたと思います。
テーマのための関数(functions.php)を左クリックする
右側のメニューから「テーマのための関数(functions.php)」を探し、左クリックしましょう。
上記のように、テーマのための関数(functions.php)が開いたと思います。
2. 編集箇所を特定する
テーマのための関数が開いたら、スタイルシートを読み込むコードを追記する場所を探しましょう。
wp_enqueue_scriptを検索する
ブラウザの機能を利用して、"wp_enqueue_script"というキーワードを検索しましょう。
Chromeでは、Ctrl+Fで検索ができます。
検索すると、上記画像のように、いくつかヒットすると思います。
今回の例では、テーマに「OnePress」を使用していますが、5件ヒットしました。このテーマの場合、onepress_scriptsというファンクションに、スタイルシートの読み込みコードが記述されています。テーマによって記載箇所が異なると思うので、検索してみてください。
/**
* Enqueue scripts and styles.
*/
function onepress_scripts() {
wp_enqueue_style( 'onepress-fonts', onepress_fonts_url(), array(), null );
wp_enqueue_style( 'onepress-animate', get_template_directory_uri() .'/assets/css/animate.min.css', array(), '1.0.0' );
wp_enqueue_style( 'onepress-fa', get_template_directory_uri() .'/assets/css/font-awesome.min.css', array(), '4.4.0' );
wp_enqueue_style( 'onepress-bootstrap', get_template_directory_uri() .'/assets/css/bootstrap.min.css', false, '4.0.0' );
wp_enqueue_style( 'onepress-style', get_template_directory_uri().'/style.css' );
上記のコードを良く見てみましょう。wp_enqueue_styleで始まる各行の中に、xxx.cssという記述がありますね。次は、ここにあなたの独自のスタイルシートのファイル名を書いていきますよ。
追加コードを記述する箇所は、複数見つかったwp_enqueue_styleのうち、最後のものの後です。
3. コードを追記する
では、コードを追記しましょう。
wp_enqueue_style( 'my-style', get_template_directory_uri().'/mystyle.css' );
では、wp_enqueue_styleの各引数を見ていきましょう。
・第1引数：スタイルシートを区別するハンドル名を指定します。上記の例では、my-styleを指定しました。
・第2引数：スタイルシートのURLを指定します。ここで、get_template_directory_uri()という関数を使用しています。この関数は、使用しているテーマのディレクトリを返します。末尾にスラッシュ( / )が含まれないことに注意してください。上記の例では、OnePressというテーマのディレクトリをget_template_directory_uri()で取得し、'/mystyle.css'という文字列と連結することで、スタイルシートのURLを指定しています。
※get_template_directory_uri()の詳しい説明はこちら↓
関数リファレンス/get template directory uri
※本記事では、wp_enqueue_styleに対して最低限の引数を指定した例を紹介しました。詳しく知りたい方はこちら↓
関数リファレンス/wp enqueue style
スポンサードリンク
4. 読み込みを確認する
設定が正しいか確認してみましょう。
ページを右クリックする
ブラウザであなたのページを開いたら、ページ上で右クリックをしましょう。下記画像のようにメニューが表示されます。
「ページのソースを表示」を左クリックする
表示されたメニューから、「ページのソースを表示」（上記画像の赤丸の箇所）を左クリックしましょう。ページのソースが表示されます。
ソースの中から、スタイルシートの記述を探しましょう。検索機能を使用して探しても良いです。上記画像のように、追加したスタイルシートのファイル名がソースに記述されていることが確認できれば成功です。
では、かっこいいサイトを作ってください！
スポンサードリンク
