WordPress

一番簡単!WordPressでCSSを使い分ける方法

更新日:

テーマで用意されたCSS(style.css)と別に、新しいcssを設置して、ページによって、読み込むCSSを使い分ける方法です。

●新しく「○○○.css」を作ります。

style.cssを複製してもよいですし、空のファイルから作成してもかまいません。
今回「style2.css」を作成しました。

●「header.php」を編集します。

FTPでダウンロード、またはWordpress>外観>テーマエディター>スタイルシート (style.css)で編集します。
参考:header.phpは、/home/kusanagi/(ドメイン名)/DocumentRoot/wp-content/themes/(テーマ名)/ の中にあります。
参考:headはページには表示されない情報。(メタ情報という ページタイトルなど)
headerはそのページのヘッダに当たるもので画面に表示される。ページの方のロゴや検索バーなど。

●PHP文を記述します。

header.phpファイルの、<head></head>タグの間(読み込みが確実にするためタグ内の後半の方)に、cssファイル読み込み分けのphp文を下記のように挿入します。

<?php if(is_page(948) or is_page(948) or is_page(948) ){?>
<link rel=”stylesheet” href=”https://(ドメイン名)/wp-content/themes/(テーマ名)/library/css/style2.css”>
<?php } ?>

参考:948は固定ページIDです。編集画面で固定ページタイトル画面にカーソルを当てると画面一番左下にリンクアドレスが表示されます。
参考:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_page

●新しい「○○○.css」をUPロードします。

アップロード先の例:
/home/kusanagi/(ドメイン名)/DocumentRoot/wp-content/themes/(テーマ名)/library/css の中に入れます。

●反映を確認します。

実際に固定ページをブラウザで表示させソースを確認すると<head></head>タグの間に下記記述が挿入され指定したCSSを読み込んでいる事がわかります。

<link rel=”stylesheet” href=”https://(ドメイン名)/wp-content/themes/j(テーマ名)/library/css/style2.css” />

●新しい「○○○.css」を編集します。

編集場所:管理画面>外観>テーマエディタ>(右ペイン)テーマファイル>library>css>style2.css

以上で、新しいcssが設置できるようになり、新しいcssの編集もできるようになりました!!
ご活用ください!

-WordPress

Translate »

Copyright© 解決方法あった! , 2021 All Rights Reserved Powered by STINGER.