サポート » 使い方全般 » 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件の返信を表示中 - 16 - 30件目 (全61件中)
  • トピック投稿者 wilsher

    (@wilsher)

    wp^printよりかはシンプルなので、これで提案しようと思います。
    ちなみに、これは、何と言うプラグインでしょうか?

    僕が前に回答した

    ただ印刷した時のレイアウトを綺麗にしたいだけであれば、特別 URL や 新規ウィンドウに拘る必要はないのかな?と思います。

    に対する案なので、参考程度にしていただければと思います。

    JS / CSSファイルの読み込み方は
    https://ja.forums.wordpress.org/topic/148098?replies=16#post-203441
    URL パラメーターでの処理については
    https://ja.forums.wordpress.org/topic/148098?replies=16#post-203526
    にて回答させていただいた内容となります。

    ブラウザの「戻る」ボタンで通常のページに戻る必要があります・・・(T_T)

    わざわざブラウザの戻るボタンが必要なのかは疑問ではありますが、昨日までに回答させていただいた内容で、実現は可能だと思います。

    1. プレビューするための URL パラメーターがある
    2. 1 の値が true の場合、print.css を media all または screen で最後に読み込む

    が一番簡単な方法だとは思います。
    ということで、実装してみました。

    ■ Demo
    http://goo.gl/az5chx
    右側にある Print this page というボタンを押してみてください。

    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。

    デモページ右側の一番上のボタンの動作でイメージ通りです。
    カスタムフィールドも、表示可能ですよね?

    これを実現するのphpファイルは、
    どのように書いたらいいですか?

    トピック投稿者 wilsher

    (@wilsher)

    失礼しました。
    phpファイルではなく、jsファイルの誤りです。

    はい、カスタムフィールドも表示可能です。
    Print 用 CSS で表示 / 非表示をしているだけで、投稿データの加工などは行っておりません。

    これは、js だけではなく php も使っています。
    また、ソースコードをここに書くのは少々長くなってしまうので(汗)

    行ったのは先ほどご回答させていただいた内容になります。

    1. WordPress がオリジナル URL パラメーターを認識できるようにする
    2. JS / CSS ファイルを読み込ませる
    • 1 で追加した URL パラメーターの値が true の場合、print.css を media all または screen で最後に読み込むようにする
    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。
    光が見えてきました。

    1.WordPress がオリジナル URL パラメーターを認識できるようにする

    <?php // シングルページで適用するテンプレートを変更
    function single_template_switch($template) {
        $new_template = $template;
        if (isset($_GET['type'])) {
            $new_template = 'single-' . esc_html($_GET['type']) . '.php';
            if (is_array($template)) {
                $new_template = array(
                    $new_template,
                    isset($template[1]) ? $template[1] : 'single.php'
                    );
            } else {
                $new_template = preg_replace('/[^\/]+\.php$/i', $new_template, $template);
                if (!file_exists($new_template)) {
                    $new_template = $template;
                }
            }
        }
        return $new_template;
    }
    add_filter('single_template', 'single_template_switch');
    ?>

    これで大丈夫でしょうか?他サイトのコードを参考にしました。

    2.JS / CSS ファイルを読み込ませる
      1 で追加した URL パラメーターの値が true の場合、print.css を media all または screen で最後に読み込むようにする
    →最後に読み込ませるとは、どういう処理をすれば良いですか?

    また、ソースコードをぜひお願いしたいです。
    メール等でやり取りさせていただく事は可能でしょうか?

    トピック投稿者 wilsher

    (@wilsher)

    上記の、オリジナルURLを読むコードは、今回はindex-printなので、singleの部分をindexに変更しています。

    そんなに難しい事をしなくても大丈夫です。
    今回の仕様は URL パラメーターによって CSS を切り替えるだけ になります。
    よって、テンプレートファイルの切り替えも必要ありません。

    先ほど回答させていただいた内容だけで大丈夫です。
    https://ja.forums.wordpress.org/topic/148098?replies=23#post-203554
    ※リンク先には参考になるソースコードの記述もあります。

    個別対応させていただく事は可能ではありますが・・・(汗)
    こちらのフォーラムであれば、他の方からも回答をいただける可能性がありますよ。

    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。
    phpコードは、
    https://ja.forums.wordpress.org/topic/148098?replies=23#post-203554
    にあるコードを自分用に変更すれば良いですね?例えば、cmsをtypeに変更。
    書く場所は、function.phpですよね?

    jsファイルは、どんな感じになりますか?

    例えば、cmsをtypeに変更。
    書く場所は、function.phpですよね?

    はい、使用中のテーマの functions.php です。

    jsファイルは、どんな感じになりますか?

    絶対に必要なのは window.print() だけです。その他必要であれば、特定イベントが発火した時にクラスを追加するなど仕様によりけりです。
    JS を書くのが面倒であれば、アンカータグの onclick 属性を使ってしまうのも 1 つの手だと思います。

    <a href="#" onclick="window.print(); return false;">印刷する</a>

    こんな感じです。

    トピック投稿者 wilsher

    (@wilsher)

    ありがとうございます。
    早速試してみます。

    print.css を media all または screen で最後に読み込むようにする
    →これは、大元のスタイルシートに書くのですか?また、どのように書けば良いですか?

    また、上記のご回答の中と参考リンク先に、CSSを切り替える命令がないようにみえますが、処理するコードは書かれているのですね?

    トピック投稿者 wilsher

    (@wilsher)

    <?php
    function my_query_vars( $vars ) {
        $array = array( 'type' );
        return array_merge( $array, $vars );
    }
    add_filter( 'query_vars', 'my_query_vars' );
    
    function my_wp_nav_menu( $output, $args ) {
        return preg_replace('/href="(.*?)"/', 'href="' . add_query_arg( array( 'type' => 'type' ), '$1' ) . '"', $output);
    }
    add_filter( 'wp_nav_menu', 'my_wp_nav_menu', 10, 2 );
    >

    phpは、これで大丈夫でしょうか?

    矢継ぎ早で、済みませんm(__)m

    トピック投稿者 wilsher

    (@wilsher)

    何度も済みません。

    2.JS / CSS ファイルを読み込ませる
      1 で追加した URL パラメーターの値が true の場合、print.css を media all または screen で最後に読み込むようにする
    →条件分岐で読み込む、という解釈でしょうか?知識が足りず、申し訳ありません(–;

    トピック投稿者 wilsher

    (@wilsher)

    自分なりに考えて、ここまではfunction.phpにコーディングしました。

    <?php /**印刷プレビュー用CSSとJS読み込み**/
    
    function my_enqueue_scripts() {
         wp_enqueue_style( 'mythemename-print', get_template_directory_uri() . '/css/print.css', array(), false, 'print' );
        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' );
    
    ?>
    
    <?php /**URLパラメータにtypeを追加**/
    
    function my_query_vars( $vars ) {
        $array = array( 'type' );
        return array_merge( $array, $vars );
    }
    add_filter( 'query_vars', 'my_query_vars' );
    
    ?>

    合ってますか?
    スタイルシートの読み込みですが、javascriptのみadd_actionがあります。
    stylesheetのadd_actionはいらないんでしょうか?

    そのままですと、スタイルシートが切り替わらないので、get_query_var() の値を使って切り替えて上げる必要があります。

    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' );
15件の返信を表示中 - 16 - 30件目 (全61件中)
  • トピック「jsの設置場所と読み込み方法」には新たに返信することはできません。