外部CSS、画像の格納場所についてのベストプラクティス

0
いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #63844
    アバター画像星乃 みなみ
    閲覧者
    36

    トピックわけて再投稿します。

    カスタマイザーのCSS記入欄では、整理出来ない量のCSSを記述する場合、特に背景画像とか多用している場合、CSSファイルを外部化したい場合があります。CSSから呼び出してる画像も当然です。

    前トピックで提案したパスでは、Snow Monkey内にあるため、バージョンアップの時上書きされることがわかりました。
    そこで、もう一度、格納場所を再検討してみたいと思います。あわせて、外部CSSを読み込むフックについても再確認したいと
    思います。

    かなり悩んだのですが、次のようなパスはどうでしょう?

    /wp-content/my/css/my.css
    /wp-content/my/img/hoge.png

    myというディレクリー名は、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
    	}
    );
    

    パスの指定部分、ドメインからフルパスで記述しないとダメでしょうか

    皆さんは普段どうされているのか、教えて頂ければと思います。

    0
    いいねをした人: 居ません
    #63853
    Kmical Lights
    閲覧者
    234

    まず、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 じゃなくブロックエディターのやりたい事に合わせてリファレンスを参考にエディターのロード時などで読み込ませる方が良いかもしれません(ケースバイケースでもあるので、割愛します)。

    37
    いいねをした人:
    #63909
    キタジマ タカシ
    参加者
    2234

    小山さん

    WordPress で CSS、JS を使うときは余程のことがない限り子テーマ(Snow Monkey のような親テーマを使う場合)かプラグイン領域にファイルを置きます。その中でどこに置くかは制作者の好き好きですが、テーマかプラグインの中というのは絶対なので、その中でいかに整理するかという感じになります。

    パスの指定部分、ドメインからフルパスで記述しないとダメでしょうか

    WordPress の基本的な関数があります。

    My Snow Monkey を使う場合は My Snow Monkey 内に My Snow Monkey までの URL とパスが定義されているのでそれを使うのが簡単です。

    0
    いいねをした人: 居ません
    #63939
    アバター画像星乃 みなみ
    閲覧者
    36

    確かに、子テーマで素直に設定するという方法もありそうですね。
    その場合、子テーマのstyle.cssで、親テーマのstyle.cssを全部上書きされるのでしょうか
    それとも子テーマのCSSが追記されるのでしょうか?

    WordPressの関数、最初のほうは、パスを関数として定義するように記述する風に受け取ったのですが、認識に間違いないですか? 後者のほうも、コードの書き方がちがうけど、同様なのかなとおもいました。これ、functions.phpに記述します?
    My Snow Monkeyに記述します?

    とはいえ、プラグインディレクトリーに格納し、My Snow Monkeyに記述することを推奨するキタジマさんの記事がありました。
    これがベストプラクティスのような気がします。ググれば答えが見つかるのですね。どうでしょう

    0
    いいねをした人: 居ません
    #64004
    キタジマ タカシ
    参加者
    2234

    その場合、子テーマの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 の記事をみてご自身で判断するのが良いかなと思います。

    0
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「外部CSS、画像の格納場所についてのベストプラクティス」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。