- このトピックには4件の返信、3人の参加者があり、最後に
により3年、 11ヶ月前に更新されました。
-
投稿
-
トピックわけて再投稿します。
カスタマイザーのCSS記入欄では、整理出来ない量のCSSを記述する場合、特に背景画像とか多用している場合、CSSファイルを外部化したい場合があります。CSSから呼び出してる画像も当然です。
前トピックで提案したパスでは、Snow Monkey内にあるため、バージョンアップの時上書きされることがわかりました。
そこで、もう一度、格納場所を再検討してみたいと思います。あわせて、外部CSSを読み込むフックについても再確認したいと
思います。かなり悩んだのですが、次のようなパスはどうでしょう？
/wp-content/my/css/my.css
/wp-content/my/img/hoge.pngmyというディレクリー名は、My Snow Monkeyから呼び込んでるからという意味です。
my.cssは、実装者が独自に作ったcssという意味でつけました
カルーセルなどのjsファイルも同様にここに置くことも出来ると考えています。いっそのこと、wp-content/plugins/my-snow-monkey配下に置くことも考えましたが、
My Snow Monkeyが汚染されるかなと思って辞めました。
同様にthemesディレクトリーに、テーマフォルダーと並列に配置することも考えました。これを読み込むMy Snow Monkeyに記述するフックですが、以前教えてもらった物だと以下の様になると思います。
//my.css add_action( 'wp_head', function() { ?> <link rel="stylesheet" href="/wp-content/my/css/my.css" > <?php } );パスの指定部分、ドメインからフルパスで記述しないとダメでしょうか
皆さんは普段どうされているのか、教えて頂ければと思います。
いいねをした人: 居ませんまず、WordPressのディレクトリに別のディレクトリを割り当ててどうこうするのは最終手段です。（WP 3系時代に議論され済みのようで、現在でもこの思想は変わってない様子。）
WordPress本体のディレクトリにアレコレ置くのを公式は推奨しないと言う事です。テーマでもプラグインでも。そして、テーマで読まれるものはテーマ内、プラグインで読まれるCSS, jsなどのリソースはプラグインディレクトリ内で完結させるのが推奨とされています。
ですが、テンプレートのみ例外で、プラグインが使用するものであっても、テーマディレクトリに別領域を生成して、割り当てる形です。
bbPressやWooCommerce等のプラグインは、使用しているテーマ内にwoocommerce等のディレクトリを生成し、そこに商品ページなどのテンプレートを格納されています。
これはテンプレートと言う性質上、プラグインでは本来難しいWordPressの仕様に伴ってもいます（少し翻訳も難しいのですが、興味あればWP 3〜4系辺りの議論を調べてください）なので、My Snow Monkey もプラグインと言う事から WordPress のプラグインでするCSSの読み込ませ方法を用いるだけで良いと思います。
wp_enqueue_scripts、またはadmin_enqueue_scriptsなどを用いる方法です。いっそのこと、wp-content/plugins/my-snow-monkey配下に置くことも考えましたが、
My Snow Monkeyが汚染されるかなと思って辞めました。プラグインのディレクトリに機能を拡張させる為のリソースを置くのは汚染では無いです。
汚染というのであれば、WordPress本体などに別ディレクトリを生成する方が、深いです。WordPressのシステム全体の汚染につながってしまいます。メンテナンス性などを考慮する場合、通常のプラグインや作法に従って作られたコードの方が読みやすいですので、私なら
wp-content/plugins/my-snow-monkey/assets/styles/..(.css)
wp-content/plugins/my-snow-monkey/assets/scripts/..(.js)
wp-content/plugins/my-snow-monkey/assets/images/..(.png / .jpg)
wp-content/plugins/my-snow-monkey/App/..(.php)と言う感じで、Snow Monkey 等に合わせた構造を my-snow-monkey 内に作って実装するのがベストプラクティスかなーと思います。
コードで言うと、
add_action( 'wp_enqueue_scripts', 'my_snow_monkey_enqueue_assets' ); add_action('admin_enqueue_scripts', 'my_snow_monkey_enqueue_assets' ); function my_snow_monkey_enqueue_assets() { wp_enqueue_script( 'my-snow-monkey-js', MY_SNOW_MONKEY_URL . '/assets/scripts/my-snow-monkey.js', [ \Framework\Helper::get_main_script_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/assets/scripts/my-snow-monkey.js' ), true ); wp_enqueue_style( 'my-snow-monkey-css', MY_SNOW_MONKEY_URL . '/assets/styles/my-snow-monkey.css', [ \Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/assets/styles/my-snow-monkey.css' ) ); }って感じですかねー。
ブロックエディターに対しては、
admin_enqueue_scriptsじゃなくブロックエディターのやりたい事に合わせてリファレンスを参考にエディターのロード時などで読み込ませる方が良いかもしれません（ケースバイケースでもあるので、割愛します）。いいねをした人:小山さん
WordPress で CSS、JS を使うときは余程のことがない限り子テーマ（Snow Monkey のような親テーマを使う場合）かプラグイン領域にファイルを置きます。その中でどこに置くかは制作者の好き好きですが、テーマかプラグインの中というのは絶対なので、その中でいかに整理するかという感じになります。
パスの指定部分、ドメインからフルパスで記述しないとダメでしょうか
WordPress の基本的な関数があります。
My Snow Monkey を使う場合は My Snow Monkey 内に My Snow Monkey までの URL とパスが定義されているのでそれを使うのが簡単です。
いいねをした人: 居ません確かに、子テーマで素直に設定するという方法もありそうですね。
その場合、子テーマのstyle.cssで、親テーマのstyle.cssを全部上書きされるのでしょうか
それとも子テーマのCSSが追記されるのでしょうか？WordPressの関数、最初のほうは、パスを関数として定義するように記述する風に受け取ったのですが、認識に間違いないですか？ 後者のほうも、コードの書き方がちがうけど、同様なのかなとおもいました。これ、functions.phpに記述します？
My Snow Monkeyに記述します？とはいえ、プラグインディレクトリーに格納し、My Snow Monkeyに記述することを推奨するキタジマさんの記事がありました。
これがベストプラクティスのような気がします。ググれば答えが見つかるのですね。どうでしょういいねをした人: 居ませんその場合、子テーマのstyle.cssで、親テーマのstyle.cssを全部上書きされるのでしょうか
それとも子テーマのCSSが追記されるのでしょうか？「親テーマのstyle.cssを全部上書きされる = 親テーマの style.css は無しになって、全部子テーマの style.css に書かなければいけない」
「子テーマのCSSが追記される = 親テーマの style.css はイキ、それに子テーマの style.css が追加」ということでしょうか。だとすると、これはご本人次第ですね。普通にやれば後者ですが、好みで前者にされる方もいないことはないと思います。
WordPressの関数、最初のほうは、パスを関数として定義するように記述する風に受け取ったのですが、認識に間違いないですか？ 後者のほうも、コードの書き方がちがうけど、同様なのかなとおもいました。これ、functions.phpに記述します？
My Snow Monkeyに記述します？PHP や WordPress の関数の書き方について詳しく指南するのはこのフォーラムの存在意図とは外れるので割愛しますが、
functions.phpか My Snow Monkey かについてはこちらもご本人の好みの問題になります。上ではられている My Snow Monkey の記事をみてご自身で判断するのが良いかなと思います。いいねをした人: 居ません
- トピック「外部CSS、画像の格納場所についてのベストプラクティス」には新しい返信をつけることはできません。