web-dev-qa-db-ja.com

$ wp_styles-> add_dataを使ってフッターにスタイルを追加できますか？

$ wp_scriptsと$ wp_stylesのadd_data関数を使って、jsとcssのスクリプトをフッターに簡単に移動するスクリプトを作成しています。スクリプトの場合、グループが0より大きい場合、スクリプト呼び出しはフッターに移動されます（以下の最初のforeachがそれを行います）。しかし、スタイルのグループを設定しても同じ効果はありません（そしてgroupはsecond foreachで正しく設定されます）。同じ方法でスタイルをフッターに移動する方法はありますか、それとも代替方法を探すべきですか？

function mod_scripts(){
    global $wp_scripts, $wp_styles;
    foreach($wp_scripts->queue as $script){
        if ( ! $wp_scripts->get_data( $script, 'group' ) ){
            $wp_scripts->add_data( $script, 'group', 1 );
        }
    }
    foreach($wp_styles->queue as $style){
        if ( ! $wp_styles->get_data( $style, 'group' ) ){
            $wp_styles->add_data( $style, 'group', 1 );
        }       
    }
}

編集： 要求の理由は、私はページの読み込みを速くするためにブロッキングCSSを取り除こうとしているからです。推奨される方法は、基本的にはCSSを直接​​ページに埋め込むことですが、うまくいきません。そして今、私は私が尋ねたところの質問には欠陥があることに気付きました。私はまだプラグインとの適切な互換性を維持したままスタイルをロードする効果的な方法を探しています。

wp-enqueue-scriptstylesheet
4
Jeremiah Prummer

これの正確な理由はわかりませんが、スタイルをフッターに移動するという考えは捨てるべきです。速度の向上が得られた場合、気づかないほどの量が得られる可能性がありますが、それは他の大きなものを犠牲にします。

スタイルは常に<head></head>タグ内に追加する必要があります。その理由は、headタグの外側の<style>タグは無効なHTMLだからです。そのため、スクリプトで使用するようなwp_enqueue_styleおよびwp_register_styleを使用してフッターにスタイルをロードするオプションがありません。

私はこの考え全体を真剣に再考します。

編集

@ G.Mからのこの回答へのコメントからの補足として.

wp_enqueue_styleは、<link>タグではなく、<style>タグを追加します。ただし、<link>タグは<head>外でも許可されません

5
Pieter Goosen

@ pieter-goosenおよび@ birgire他の回答やコメントでは、 W3Cの仕様 でフッターにcssは使用できません。仕様ページからの引用はリンクされています。

link要素はrel属性を持たなければなりません。

rel属性が使用されている場合、要素はhead要素に制限されます。

それ以外にも、フッターにcssを追加したとき、誰かがあなたのページを開いたときに、完全なcssがロードされるまでunstyledのように見えます。 CSS経由で表示されます、スライダーは目に見える画像のULリストのように表示されます...

それで、本当に、私はそれが悪い考えだと思います。

とは言っても、「そうしない」のような答えは好きではありません。「このようにしてできるのは好きですが、しない」ことをお勧めします。

だから、ここでそれを行う方法が、ねえ、私はそれをしないことをお勧めします。

スクリプトとスタイルはwp_enqueue_scriptsフックに追加する必要がありますが、styles afterwp_headフックが起動されている場合は、フッターにスクリプトとスタイルが追加されます。

その便利なアプリケーションは、スクリプトがショートコードコールバック内でキューに入れられ、ショートコード固有のスクリプトを簡単に追加する可能性を追加するときです。

スタイルに関しては、WordPressはW3Cステートメントについては自信がありません。

ワークフロー：

  1. hook 'wp_print_styles' 、すべてのスクリプトとスタイルが既にエンキューされているが印刷されていない場合
  2. スクリプトとスタイルの現在のキューを変数に格納する
  3. このように、WordPressがスクリプトとスタイルを印刷しようとすると、印刷するものが見つからない場合は、スクリプトとスタイルの両方のキューを空にします。
  4. このようにして、WordPressがフッターに印刷するスタイルとスクリプトを見つけて印刷できるようになると、優先度0で 'wp_footer' にフックし、ポイント＃2に格納したスタイルとスクリプトキューを復元します。 。

すべて数行のコードで実行できます。

add_action('wp_print_styles', function() {
  if ( ! doing_action( 'wp_head' ) ) { // ensure we are on head
    return;
  }
  global $wp_scripts, $wp_styles;
  // save actual queued scripts and styles
  $queued_scripts = $wp_scripts->queue; 
  $queued_styles  = $wp_styles->queue;
  // empty the scripts and styles queue
  $wp_scripts->queue = array();
  $wp_styles->queue  = array();
  $wp_scripts->to_do = array();
  $wp_styles->to_do  = array();
  add_action( 'wp_footer', function() use( $queued_scripts, $queued_styles ) {
    // reset the queue to print scripts and styles in footer
    global $wp_scripts, $wp_styles;
    $wp_scripts->queue = $queued_scripts;
    $wp_styles->queue  = $queued_styles;
    $wp_scripts->to_do = $queued_scripts;
    $wp_styles->to_do  = $queued_styles;
  }, 0 );
}, 0);

注意

上記のコードでは、クロージャの使用にはPHP 5.3以降、 doing_action の使用にはWP 3.9が必要です。

5
gmazzap

正当な理由がない限り、おそらくフッターにスタイルを入れるべきではないと言う、私はここで他の答えをエコーするつもりです。しかし、私はプラグインがbodyタグの中にスタイルを挿入したサイトでこれをしなければならなかったので、私はフッターの中でスタイルを追加した方法を共有したいと思いました。

<?php
function print_footer_styles() {
    $style_handle  = 'footer-styles';
    wp_register_style( $style_handle, get_template_directory_uri() . '/css/footer-styles.css' );
    wp_print_styles( array( $style_handle ) );
}

add_action( 'wp_footer', 'print_footer_styles' );
1
Tyler Smith

実際、FULL cssという考えの背後にある理論的根拠は、一番下（フッター）に置かれ、最後にロードされるべきです。これは非常に複雑です。

それは「モバイルの利用者」がウェブページがレンダリングされるのを3秒以上待たなければならないならば、彼らが「彼らのカートを放棄して立ち去る」ということを発見した。 - >ウェブサイトは利益のxxxパーセントのように失われます。研究はここにあります： https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ /

詳細な参照先： https://developers.google.com/speed/docs/insights/mobilehttps://www.thinkwithgoogle.com/feature/mobile-app-user-demographics/#/

調査から、彼らはウェブページが訪問者を失うことができないようにするために最初の秒以内に最初の提供者を（そしてそれ故、「倍の内容の上に」 - AFT）配信できなければならないという結論に達しました。 （そして経済的利益）。これはモバイルサイトに特に当てはまりますが、同じこと（やや低い程度）は「デスクトップサイト」にも当てはまります。

研究から得られた結論から、彼らは最大限の利益を持ち、できるだけ多くの訪問者を保つために（できるだけ少ない訪問者を失うことなく）、最適化するための原則と実装を開発します。もっと正確に）。

だからこそ（Googleによると）Webサイトのヘッダーには必須のリソース（CSS、JS）しか含まれていないはずです。AFTコンテンツの配信に理想的な1秒以内にできるだけ早くAFTコンテンツを配信するためです。残りのすべてのリソース（FULL CSS、FULL JSなど）は、AFTコンテンツが訪問者に配信されている間、最初の1秒以内にWebページに残るようにロードする必要があります。

それがどのようにそしてなぜ彼らは方法を促進します。ウェブサイトの恩恵はグーグルの恩恵でもあることを忘れないでください。ウェブサイトが経済的利益を失うならば、グーグルも彼ら自身の経済的利益を失うでしょう - それは相互利益です。そして研究はモバイルサイトのためのもので、 "デスクトップサイト"のために、効果は多少少ないでしょう - しかしそれでも終了します！

あなたは私とグーグルと同意するかもしれないし同意しないかもしれません！あなたは同様にビジネスをするより良い/異なる方法を持つかもしれません！

すべての最高！

0
Prince of Peace and Happiness

CSSをフッタにロードしないという提案にもかかわらず（そして私はそれに同意します）あなたが本当にフロントエンドのフッタにあなたのCSSをロードする必要があるならば最も簡単な方法はwp_footerフック（またはAdminの場合admin_footer）にenqueue関数をフックすることですスタイルシートをエンキューします。

// change these variables to fit your needs
$handle = 'my-css';
$css_url = plugins_url( 'plugin_style.css', __FILE__ );
$priority = 10; // make it 9999 if you want to enqueue it just before </body>

add_action('wp_footer','enqueue_my_styles', $priority);

function enqueue_my_styles(){
    wp_enqueue_style( $handle, $css_url);
}
0
Eugen Mihailescu

ページの読み込み速度はおそらく他のリクエストの影響を受けています。
Pieter Goosen のように、違いに気付くことはないだろうと述べた。
それを証明するには、次のようにします。それらのスクリプト要求を削除し、ページロードの違いを確認します。

FirefoxまたはGoogle Chrome開発者ツールを使用すると、すべてのリクエストを簡単に確認し、どのリクエストがサイトの動作を遅くしているかを確認できます。

ページロードを高速化します。

  • sQLクエリをチェックして最適化する
  • スクリプトを縮小する
  • キャッシュプラグインを使う
  • ...

乾杯

0
Diogo Gomes