web-dev-qa-db-ja.com

Wp_enqueue_scriptsはどのように機能しますか？

私は自分の卓球クラブのためのWordPressページを持っています。現在の順位をすべて含むサイトがあり、そこから自分のワードプレスページの1つにテーブルを解析したいと思います。

私はphpを使って動的テーブルを作成し、それをCSSとJavascriptでスタイルしました。私のブラウザでローカルに実行したとき、それは完璧に見え、望みどおりに動作します。しかし、私はそれをWordPressページ上で動作させることはできません。

Wp_enqueue_scriptsを使用するようにアドバイスを受けましたが、それがどのように機能するのか完全には理解できません。私はそれをfunctions.phpのどこに置くべきかについての注意を払うだけでマニュアルでそれを調べました、しかし私がそこに接続を得ることができないようにテーブルを作成する私のphpでそれを使う方法ではありません。 （？）エンキューはどの程度正確に機能しますか？私が必要としているのは、私が書いたphpで何を置き換えるべきかについてのアドバイスです。

もっと良い方法があるでしょうか。これまでのところ、ショートコードとコードスニペットプラグインをすべて同じ結果で試してみました。テーブルの内容は解析されますが、適用したいCSSとJavascriptは実行されません。

これは私がページ上で実行したいPHPです：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="standings_style.css">
</head>
<?php

$url  = 'http://wttv.click-tt.de/cgi-bin/WebObjects/nuLigaTTDE.woa/wa/groupPage?championship=M%C3%BCnster+15%2F16&group=249840';
/* try to prevent errors */
libxml_use_internal_errors(true);
/* create the DOMDocument object ready to receive html from remote url */
$dom                      = new DOMDocument;
/* use some of the defined properties for libxml */
$dom->validateOnParse     = false;
$dom->standalone          = true;
$dom->strictErrorChecking = false;
$dom->recover             = true;
$dom->formatOutput        = false;
$dom->preserveWhiteSpace  = false;
$dom->loadHTML(file_get_contents($url));
/* Capture errors */
$parse_errs = serialize(libxml_get_last_error());
libxml_clear_errors();
/* create an X-Path object ready to query the DOM */
$xp  = new DOMXPath($dom);
/* Query to find tables with given class */
$col = $xp->query('//table[@class="result-set"]');
foreach ($col as $table) {
    echo strip_tags($dom->saveHtml($table), "<td><table><tbody><th><tr><img>");
    // strip tags i dont want in the table 
    break;
    // i only want the first one currently
}   
?>
<body>
<script>
var aTags = document.querySelectorAll("td[nowrap]"); // get all team cells
for(var i = 0; i < aTags.length; i++)
{
    var str = aTags[i].innerHTML
        aTags[i].className += "teams"; // assign teams class to parent tag (the whole row)
    if(str.indexOf("DJK Borussia Münster")>0){ // search for teamname 
        aTags[i].parentNode.className += " highlight"; // assign highlight class to parent tag (the whole row)
    }
}

var bTags = document.getElementsByTagName("img"); // get all images
for(var i = 0; i < bTags.length; i++) {
    var str = bTags[i].src;
    if(str.indexOf("up_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/up.gif"; // change image source
    }
    if(str.indexOf("down_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/down.gif"; // change image source
    }
    if(str.indexOf("up_grey_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/up_r.gif"; // change image source
    }
    if(str.indexOf("down_grey_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/down_r.gif"; // change image source
    }
}
</script>
</body>
</html>

そしてfunctions.phpの一部

/* Enqueue parent stylesheet first, child stylesheet second*/
function child_theme_s_enqueue_styles() {

 $parent_style = 'parent-style';

 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style )
 );
}
add_action( 'wp_enqueue_scripts', 'child_theme_s_enqueue_styles' );


/* Enqueue Javascript in /child-theme-s/includes/js/ */
function child_theme_s_scripts(){

 wp_enqueue_script('child-theme-s-js', get_stylesheet_directory_uri() . '/includes/js/child-theme.js');

 }

add_action( 'wp_enqueue_scripts', 'child_theme_s_scripts' );

// include files via shortcode
function include_file($atts) {
    extract(shortcode_atts(array('filepath' => 'NULL'), $atts));
    if ($filepath!='NULL' && file_exists( trailingslashit( get_stylesheet_directory() ) . $filepath)){
    ob_start();
    include(get_stylesheet_directory() . $filepath);
    $content = ob_get_clean();
    return $content;
    }
}


add_shortcode('include', 'include_file');


function themeslug_enqueue_style() {
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
    wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'standings_style.css', false );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}


add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
phpcssjavascript
1
user98847

質問を書き換えてくれてありがとう：それは今はっきりしているようだ。先に長引いたコメントですみませんが、私は私のラップトップでは行きませんでした。

私はあなたのコードの中のいくつかのタイプミスを修正してそしてこれを私のfunctions.phpに貼り付けました：

// include files via shortcode
function include_file($atts) {
    extract(shortcode_atts(array('filepath' => NULL), $atts));
    if ($filepath!='NULL' && file_exists( trailingslashit( get_stylesheet_directory() ) . $filepath)){
    ob_start();
    include(get_stylesheet_directory() . '/' . $filepath);
    $content = ob_get_clean();
    return 'hello' . $content;
    }
}


add_shortcode('include', 'include_file');


function themeslug_enqueue_style() {
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
    wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'standings_style.css', false );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}


add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );

それで、あなたの子供のテーマのために、あなたはwp-content/themes/childhemingway/includefile.phpとしてあなたの最初のコードスニペットを保存し、そして短いコード[include filepath = "includefile.php"]をページに入れるでしょう。

ページを表示すると、ブラウザに表示されます（わかりやすくするためにここでは減らしています）。

// My theme's doctype, <head>, <body> and page header

<div class="entry-content">

    <link rel="stylesheet" type="text/css" href="standings_style.css">

    <table class="result-set" cellpadding="0" border="0" cellspacing="0">
        Your table data appears here OK.
    </table>

    <script>
        // your script renders here OK
    </script>

</div>

// My theme's sidebar, footer, </body> & </html>

私はこれらのリソースのための私のブラウザで5 Failed to load resource: the server responded with a status of 404 (Not Found)エラーを受け取ります：

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/up_grey_11x11.gif?nlv=e9c36c22

http://test.localhost/test-page/standings_style.css

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/down_11x11.gif?nlv=e9c36c22

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/up_11x11.gif?nlv=e9c36c22

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/down_grey_11x11.gif?nlv=e9c36c22

あなたのスクリプトは問題なく動作しているように見えますが、修正するための参照があります。

あなたのテーマの中に欠けている4つの画像ファイルを保存し、あなたのスクリプトに関連してそれらを参照し、そしてそれが物事を前進させるかどうか見る必要があるでしょう。

現時点でのCSSファイルへの参照はページのURLに相対的であり、これはwp_enqueue_scriptsが入ってくる場所です。

インクルードファイルからこの行を削除します。

<link rel="stylesheet" type="text/css" href="standings_style.css">

standings_style.cssのコピーがwp-content/themes/childhemingway/に保存されていることを確認してください

現在の関数の代わりにこれをfunctions.phpで使用してフックします。

function wpse_233056_enqueue_style() {
    wp_enqueue_style( 'special-table-stylesheet', get_stylesheet_directory_uri() . '/standings_style.css' );
}


add_action( 'wp_enqueue_scripts', 'wpse_233056_enqueue_style' );

そして、それを大丈夫に読んでいれば、修正する必要があります。

あなたの親テーマがそのメインスタイルシートをどのようにロードするかに依存して、私たちはそれを同様にエンキューする必要があるかもしれません。

さらに、JavaScript生成ファイルを更新して、テーマの/ img /ディレクトリから画像をロードします。これを変える：

bTags[i].src = "img/up.gif";

に

bTags[i].src = "<?php echo get_stylesheet_directory_uri(); ?>/img/up.gif";

それを整理する必要があります。もちろん、他の3つの画像についても同じです。

0
Andy Macaulay-Brook