サイト名称変更のお知らせ

【WordPressでオリジナルサイトを作ろう】⑥CSSファイル読込編

最終更新日

CSSファイルの読み込みを行います。

読み込むCSSは、リセット用のCSSとテーマディレクトリ直下の「style.css」です。

HTMLだけで作るWebサイトの場合、通常は<head>内でCSSの読み込みを行いますが、WordPressでは「functions.php」というファイルの中で読み込むことが推奨されています。

functions.phpの作成

まずは、テーマディレクトリ直下に「functions.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\functions.php

functions.phpのコーディング

続いて、CSSの読み込み処理をコーディングしていきます。

※注意
「functions.php」は、CSSの読み込み以外にも、WordPressの色々な処理を記述するための重要なファイルです。
誤った記述をすることで、サイトが表示されなくなったりすることもありますので、修正する際はバックアップをとるなどして注意して修正してください。

ソースコードは下記の通りです。

    functions.php
    
<?php

function my_enqueue_styles() {
  wp_enqueue_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
  wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');
    
  

PHPの開始タグ

      functions.php
      
<?php
      
    

「functions.php」は、phpの記述のみのファイルですので終了タグは省略します。

CSSファイルの読み込み

      functions.php
      
function my_enqueue_styles() {
  wp_enqueue_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
  wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');
    
    
wp_enqueue_scripts
「wp_enqueue_scripts」をフックしてCSSの読み込み用に作成した「my_enqueue_styles」関数を呼び出します。
wp_enqueue_style
CSSファイルを読み込みます。
style.cssはressの後に読み込ませたいので、「array('ress')」で読み込み順序を指定しています。
「get_stylesheet_uri()」はテーマディレクトリ直下のstyle.cssのパスを取得する関数です。

以上でCSSファイルの読み込みは終了です。

ちなみに、JavaScriptの読み込みもCSSと同じく「wp_enqueue_scripts」関数で行います。

次は、ヘッダーのコーディングを行っていきます。

次の記事 >

< 前の記事

WordPressでオリジナルサイトを作ろう

関連記事