web-dev-qa-db-ja.com

WordPressの全ページにチャット（HTML、js、css）を含める

私はすべてのWP Webサイト上に、チャットウィジェットをHTML、css、jsで追加する必要があります。私はローカル（functions.php）で以下を試してみました、そしてそれはうまくいきました、しかしただホームページで。オンラインで同じコードを入力しても何も表示されません。何かアドバイス？前もって感謝します ：）

<?php
     function add_chat ( ) { 
     ?>
            <script type="text/javascript">
            SERVICE_PATTERN_CHAT_CONFIG = {
                appId: '',
                clientId: '',            /* no need to change this */
                apiUrl: '',
                tenantUrl: '',
                width: 300,
                chatPath: ''

            };
            </script>
            <script type="text/javascript" src="js/snippet.js"></script>
    <?php
        }

add_action ('wp_footer', 'add_chat' );?>
widgetsjavascripthtml
1
Lisa

ご回答ありがとうございます。結局、私はwp_registerとwp_enqueueを使ってチャットを追加することに成功しました：

function add_chat_scripts() {
    wp_register_script( 'chat', get_template_directory_uri() . '/js/chat.js' , array(), true );
    wp_register_script( 'chat-snippet', get_template_directory_uri() . '/js/snippet.js', array('chat') );
    wp_enqueue_script  ('chat');
    wp_enqueue_script('chat-snippet');
}
add_action( 'wp_enqueue_scripts', 'add_chat_scripts' );

そしてそれはうまくいった。しかし今、問題はチャットがホームページにしか表示されず、他のどこにも表示されないことです。どうすれば解決できますか？あなたはここでチャットを見ることができます（それはクロムとFirefoxでは動作していません）

私はwp_registerなどをローカルでトライします。オンラインではまだインラインスクリプトがありますが、とにかく働いています。

前もって感謝します

1
Lisa

インラインスクリプトをsnipper.jsファイルの末尾に追加し、wp_enqueue_scripts()を使用してそれをエンキューします。

function my_chat_script() {
    wp_enqueue_script( 'chat-js', 'URL OF SNIPPER HERE', false );
}
add_action( 'wp_enqueue_scripts', 'my_chat_script' );

これがfunctions.phpファイルを使ってあなたのWordPressにスクリプトを含めるための正しい方法です。

ただし、それらを別々に追加することを主張する場合は、wp_add_inline_script()を使用できます。

function chat_script() {
   wp_enqueue_script( 'my-chat-script', 'SNIPPER URL HERE', array(), '1.0' );
   wp_add_inline_script( 'my-chat-script', 'SERVICE_PATTERN_CHAT_CONFIG = {appId: '0ef0636b4c36497b866322a096926049', clientId: 'WebChat',apiUrl: 'https://poc.3d2b.ccaas.becloudsolutions.com:9443/clientweb/api/v1',tenantUrl: '3d2b.com',width: 300,chatPath: ''};' );
}
add_action( 'wp_enqueue_scripts', 'chat_script' );

これはあなたのスニペットとインラインスクリプトを別々に出力します。

1
Jack Johansson