ﾎｰﾑ
PC
WP
WordPress導入
独自CSSやJavascript追加

独自CSSやJavascript追加

≪ 表示ｱﾄﾞﾚｽ変更 | Wp | 固定ﾍﾟｰｼﾞｱｺｰﾃﾞｨｵﾝﾒﾆｭｰ ≫

独自CSSやJavascriptを追加して使い易く

　いずれのテーマを使っていても、用意された設定画面だけで表示設定を変えるのには、限界があります。もっと、この場合の表示をこうしたいという時には、cssの設定をいじる必要が出てきます。
　また、独自のHTMLやJavascriptを追加したい場合もあるかもしれません。
　このような場合、ならべくなら元のテーマ内のファイルを直接編集しないようにしないと、後の管理が大変です。テーマは頻繁に更新されるので、更新で設定がまっさらに上書きされてしまうと、その度に変更を追加し直さなければなりません。
　一つのホームページだけを後生大事に更新していくだけなら、それでもさほど苦にはならないかもしれませんが、いくつものホームページを抱えていると、そんなことは苦痛でしかありません。
　そのあたりを、考慮に入れるなら、元々のテーマはなるべくいじらずに、子テーマを使うか、プラグインを使っていくか、そのどちらかで対応します。
　私も、AMPを導入する以前は、Simple Custom CSS and JSプラグインを使ってcssやJavascriptを追加していたのですが、AMPは外部cssやJavascriptの読み込みを認めてはいないので、プラグインを使っての追加変更ができません。
　そこで導入したのが、「外観>テーマエディター」から、子テーマのstyle.cssやfunction.phpに直接追加設定するやり方です。
　css は style.css に、Javascript は function.php に追加します。こういうすることで、親テーマが変更されても、子テーマに追加されたものは上書きされず、こちらが優先されます。

cssのファイルはブロックごとに整理しよう

　どのホームページにも適用するcss、見出しセットの種類ごとに指定するcss、単独のホームページタイトル（ヘッダ）を指定するcssと、cssをブロックごとに整理しておくと、その組み合わせで使い回せるので、いくつものホームページを作る場合は、管理がかなり楽になります。
　もし、Simple Custom CSS and JSプラグインを使う場合には、cssをそれぞれのブロックごとに分けて作って、例えば次の様に設定すると、管理がとても楽になります。

<link rel='stylesheet' id='cocoon-nekobase-css' href='https://www.neko01.com/cocoon-nekobase.css' type='text/css' media='all' />
<link rel='stylesheet' id='cocoon-nekoblue.css' href='https://www.neko01.com/cocoon-nekoblue.css' type='text/css' media='all' />
<link rel='stylesheet' id='cocoon-nekopc-css' href='https://www.neko01.com/pc/cocoon-nekopc.css' type='text/css' media='all' />
<link rel='stylesheet' id='AccordeonMenuCK-css' href='https://www.neko01.com/pc/AccordeonMenuCK.css' type='text/css' media='all' />

　

Javascriptの追加

　たとえば、このHPのねこを走らすJavascriptは、「外観>テーマエディター」から、子テーマのfunction.phpに直接以下のように追加設定しています。

/* Neko追加 */
// =======================================================
// Javascriptファイルの読み込み
wp_enqueue_script('NEKO_TOR', 'https://www.********/NEKO_TORA.js'); 
// =======================================================

Simple Custom CSS and JSの使い方

　AMPが必要ない場合には、Simple Custom CSS and JSプラグインを使えば、テーマには全く手を付けずに、追加のcssとして指定することが出来ます。
　ここで書いたcssは各ページのヘッダにそのまま貼り付けられます。この時、テーマに元々記述してあったcssよりも後で宣言されていれば、同じclassに違う指定をしてもこちらの方が優先されます。
　cocoonの場合は、cocoon-style-inline-css だけは、Simple Custom CSS and JS よりも後で挿入されてしまうので、ここに書かれたcssの指定を打ち消すためには、元々のcocoonの設定よりも、より強度の高い、場面を限定したcssの指定にしなければなりません。
　プラグインの場合も、おおよその場合は使えますが、ページのソースを見て、Simple Custom CSS and JSより後にcssの設定を吐き出してしまうプラグインの場合は、Simple Custom CSS and JSの設定が有効にはならないので、cocoon-style-inline-cssの場合と同じような注意が必要です。

プラグインでコードをそのまま記述して使える

　プラグインを有効化すると、Custom CSS ＆ JSというメニューができます。ここから、オリジナルなcssやjavascriptのコードを簡単に追加できます。
　追加したコードファイル名の横には、★や☆が表示されます。クリックするたびに星の色が変わり、★の時にそのコードが有効になります。

設定する順番にも注意

　Simple Custom CSS and JSでファイルに書き込まれる順番は、後に設定したもの（設定画面で上に表示されるもの）ほど、ファイルの先に書かれるようです。cssは、基本後に設定したものほど強いので、外部cssファイルの設定と独自cssの設定とで、独自cssの方が先に書かれてしまうと、外部cssの内容をお試しで変更して確かめてみるということが出来ません。
　ですから、Simple Custom CSS and JSに書き込んだファイル同士でも、どちらを優先して実行したいかによって、ファイルに書き込んで設定する順番も、気を付けておかなければならない場合があります。

最終的には別ファイルにするのがスマート

　cssやjavascriptのコードを直接記述して簡単に試せるのがSimple Custom CSS and JSの魅力ですが、あまり長いコードをこれで入力すると、各ページのヘッダ部分に、全部がずらずらと書き写されるので、ページのソースがずいぶんと汚くなってしまいます。
　ですから、ある程度それでよしという所まで煮詰めたら、cssやjavascriptのコードを別ファイルとしてサーバーに上げておいて、そのファイルをSimple Custom CSS and JSで読み込むように設定する方が、ページソースがずいぶんすっきりとします。

別ファイルのcssの作り方

　cssの別ファイルを作るには、Simple Custom CSS and JSに書いていた内容の一番最初に、「@charset “UTF-8”;」と追加して、エディタで文字コードをUTF-8に変更した後、**.cssと名前を付けて保存するだけです。
　例えば、

@charset "UTF-8";
⁄* タイトル背景画像  2ページ目以降も表示*/
.uk-container-expand{
  background-image:url("icon_source/paint.jpg");
  background-size:100% 100%;
  height:150px;
}

        ～

.marker{
  background-color:yellow;
  font-weight:bold;
  text-decoration:underline;
}

のようにします。
　そして、これをFTPソフトでサーバーにアップロードします。
　これを読みだすには、Simple Custom CSS and JSで、Add HTML Code(Add CSS Codeではなく)を選択し、

<link rel='stylesheet' href='http://www.********/****.css' type='text/css' media='all' />

のようにします。
　これで、<link 以下がページを読み出す時に、ヘーダ部分に加えられ、その結果、ここから別ファイルのcssが読み込まれます。

タイトルとURLをコピーしました