サポート » 使い方全般 » jsの設置場所と読み込み方法

  • 印刷プレビューを実現するための「print.js」「print.css」を作りました。
    ボタンも表示させ押下しますが、作動しません。

    jqueryとjs読み込みの
    <?php wp_enqueue_style(‘print’, get_bloginfo(‘siteurl’) . ‘/print.css’); ?>
    <?php wp_enqueue_script( ‘print’, get_bloginfo( ‘template_url’) . ‘/js/print.min.js’, array(jquery), false, true ); ?>
    をheader.phpのwp_headの直前に書いています。

    jsファイルはwp-admin/js/、cssファイルはルートディレクトリに入れています。

    印刷プレビューボタンを押下した時の動作スクリプト
    <script>
    jquery(document).ready(function(){
    jquery(“.printer”).click(function(){ // 印刷ボタンが押されたら
    jquery(“body”).addClass(“print”); // body classに”print”を追加
    window.print(); // 印刷を実行
    var timeout = setTimeout(function(){
    jquery(“body”).removeClass(“print”); // body classから”print”を削除
    }, 1000);
    return false; // 終了
    });
    });
    </script>
    を、header.phpのwp_headの直後に入れています。

    ボタンを表示させる
    印刷用ページを表示する
    を、サイトの表示の関係上、Contact Form 7のフォームに設置しています。

    どこが間違っているでしょうか?
    ご教授お願いいたします。

15件の返信を表示中 - 31 - 45件目 (全61件中)
  • トピック投稿者 wilsher

    (@wilsher)

    おはようようございます。
    ありがとうございます。

    上記コードに変えたら、
    管理画面が真っ白になりました・・・
    $mediaの行を削除したら、元に戻りました。

    失礼いたしました。
    シンタックスエラーです。

    function my_enqueue_scripts() {
        $media = 'print' === get_query_var( 'type' ) ? 'print' : 'all';
    
         wp_enqueue_style( 'mythemename-print', get_template_directory_uri() . '/css/print.css', array(), false, $media );
        wp_enqueue_script( 'mythemename-print', get_template_directory_uri() . '/js/print.min.js', array( 'jquery' ), false, 1 );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
    トピック投稿者 wilsher

    (@wilsher)

    素早いご回答、ありがとうございます。

    恐らくあと一息ですので、
    もうしばらくお付き合い願いますm(__)m

    次に、jsですが、
    先のスレッドで、書くのが面倒であれば、
    <a href="#" onclick="window.print(); return false;">印刷する</a>
    でもOKと頂いております。
    hrefの「#」部分には、具体的にはどういう記述を入れれば良いでしょうか?

    hrefの「#」部分には、具体的にはどういう記述を入れれば良いでしょうか?

    とくに何も必要ないです。クリックするとブラウザーの印刷ウィンドウが開きます。

    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。

    ということは、
    ボタンをクリックして印刷プレビューを表示するには、
    やはり、jsが必要ですか?

    そこは仕様によります。

    一例ですが、一番簡単な方法だとこんな感じです。
    ※ このソースコードは未検証です。

    $print = 'print' == get_query_var( 'type' ) ? true : false;
    if ( !$print ) {
        echo '<a class="print-button" href="' . get_permalink() . '?type=print">印刷ページ</a>';
    } else {
        echo '<a class="print-button" href="#" onclick="window.print(); return false;">印刷する</a>';
        echo '<a class="print-button" href="' . get_permalink() . '">印刷ページを閉じる</a>';
    }

    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。
    上記のコードを、ページ内の任意の場所に貼ればOKですか?
    ちなみに、このコードは、javascriptですよね?

    トピック投稿者 wilsher

    (@wilsher)

    上記コードを物件詳細ページに貼り付けましたが、何も表示されません。
    貼り付ける場所が違うのでしょうか?

    <!--印刷プレビューボタン-->
    <script type="text/javascript">
    $print = 'print' == get_query_var( 'type' ) ? true : false;
    if ( !$print ) {
        echo '<a class="print-button" href="' . get_permalink() . '?type=print">印刷ページ</a>';
    } else {
        echo '<a class="print-button" href="#" onclick="window.print(); return false;">印刷する</a>';
        echo '<a class="print-button" href="' . get_permalink() . '">印刷ページを閉じる</a>';
    }
    </script>

    最終的には、アイコンを作り、
    http://goo.gl/az5chx
    のように表示させる予定です。

    説明不足ですみません。
    先ほどのソースコードは PHP です・・・

    <?php
    $print = 'print' == get_query_var( 'type' ) ? true : false;
    if ( !$print ) {
        echo '<a class="print-button" href="' . get_permalink() . '?type=print">印刷ページ</a>';
    } else {
        echo '<a class="print-button" href="#" onclick="window.print(); return false;">印刷する</a>';
        echo '<a class="print-button" href="' . get_permalink() . '">印刷ページを閉じる</a>';
    }
    ?>
    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。
    入れるのは、function.phpですね?

    トピック投稿者 wilsher

    (@wilsher)

    ボタン表示は出来ましたが、
    スタイルシートの読み込みがうまく行っていないのか、
    通常のページになります(^^;
    ページのソースを見ても、
    該当のスタイルシートを読み込んでいません。

    一つ確認です。
    現在構築中のページは、不動産プラグインを使っています。
    物件詳細ページは、index.phpを元にしています。
    したがって、各ページは、single.phpではなくindex.phpが基本になっています。
    これは、影響ありますか?

    トピック投稿者 wilsher

    (@wilsher)

    今現在、function.phpに書いている内容です。

    <?php /**印刷プレビュー用CSSとJS読み込み**/
    
    function my_enqueue_scripts() {
        $media = 'print' === get_query_var( 'type' ) ? 'print' : 'all';
    
        wp_enqueue_style( 'mythemename-print', get_template_directory_uri() . '/css/print.css', array(), false, $media );
        wp_enqueue_script( 'mythemename-print', get_template_directory_uri() . '/js/print.js', array( 'jquery' ), false, 1 );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
    
    ?>
    
    <?php /**URLパラメータにtypeを追加**/
    
    function my_query_vars( $vars ) {
        $array = array( 'type' );
        return array_merge( $array, $vars );
    }
    add_filter( 'query_vars', 'my_query_vars' );
    
    ?>

    トピック投稿者 wilsher

    (@wilsher)

    ボタンを表示するphppコードは、
    不動産プラグインのテーマsingle-fudo.phpに入れました。

    トピック投稿者 wilsher

    (@wilsher)

    連続投稿失礼します。

    今、

    <?php /**印刷プレビュー用CSSとJS読み込み**/
    
    function my_enqueue_scripts() {
        $media = 'print' === get_query_var( 'type' ) ? 'print' : 'all';
    
        wp_enqueue_style( 'mythemename-print', get_template_directory_uri() . '/css/print.css', array(), false, $media );
        wp_enqueue_script( 'mythemename-print', get_template_directory_uri() . '/js/print.js', array( 'jquery' ), false, 1 );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
    
    ?>

    をheader.phpに直接入れたら、ヘッダーとサイドバーが消え、
    イメージ通りの表示が出来ました。
    スタイルシートは、このコードで間違いなく読んでます。
    あと一息だと思います。

    よろしくお願いします。

    まずはじめに、自身が作成したプラグイン以外のプラグインを編集するのは厳禁です。
    アップデートしたら全てもとに戻ります。
    これはテーマも同じです。何かのテーマを基にする場合は、必ず子テーマを作成し、作成した子テーマを変数するようにします。

    なお、テーマ内にあるのは、function.php ではなく functions.php になります。

    以下内容は全て、functions.php に記述します。

    <?php
    function my_query_vars( $vars ) {
        $array = array( 'type' );
        return array_merge( $array, $vars );
    }
    add_filter( 'query_vars', 'my_query_vars' );
    
    function my_enqueue_scripts() {
        $media = 'print' === get_query_var( 'type' ) ? 'print' : 'all';
    
        wp_enqueue_style( 'mythemename-print', get_template_directory_uri() . '/css/print.css', array(), false, $media );
        wp_enqueue_script( 'mythemename-print', get_template_directory_uri() . '/js/print.js', array( 'jquery' ), false, 1 );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
    ?>

    以下は、印刷ボタンを表示したい場所 ( 例: single.php や page.php ) に記述します。

    <?php
    $print = 'print' == get_query_var( 'type' ) ? true : false;
    if ( !$print ) {
        echo '<a class="print-button" href="' . get_permalink() . '?type=print">印刷ページ</a>';
    } else {
        echo '<a class="print-button" href="#" onclick="window.print(); return false;">印刷する</a>';
        echo '<a class="print-button" href="' . get_permalink() . '">印刷ページを閉じる</a>';
    }
    ?>

15件の返信を表示中 - 31 - 45件目 (全61件中)
  • トピック「jsの設置場所と読み込み方法」には新たに返信することはできません。