サポート » 使い方全般 » 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件の返信を表示中 - 1 - 15件目 (全61件中)
  • こんにちわ、wilsherさん。

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

    まず、この方法が間違っています。
    wp-admin、wp-includes ディレクトリは、余程の事がない限り手をいてれはいけません。
    オリジナルの JS / CSS ファイルを設置したい場合は、自身のテーマフォルダ内、または自身のプラグインフォルダ内に設置します。
    ※ wp-content/themes/my-theme-name/assets/js/hoge.js
    ※ wp-content/plugins/my-plugin-name/assets/js/hoge.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 ); ?>

    こちらも間違っています。また、get_bloginfo() 関数の使い方も間違っています。
    get_bloginfo() 関数は間違っているというより、非推奨なやり方というのでしょうか・・・。
    また

    jsファイルはwp-admin/js/

    となっているにも関わらず、JS ファイルはテーマディレクトリを参照しています。
    そのため、実行できないのではないでしょうか?

    試しに下記ソースコードを自身のテーマの functions.php 内に記載してみてください。
    ※ JS / CSS ファイルはテーマフォルダ内に設置しておいてください。

    function my_enqueue_scripts() {
         wp_enqueue_style( 'mythemename-print', get_template_directory_uri() . '/assets/css/print.css', array(), false, 'print' );
        wp_enqueue_script( 'mythemename-print', get_template_directory_uri() . '/assets/js/print.min.js', array( 'jquery' ), false, 1 );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

    このような感じ大丈夫だとは思います。

    頑張ってください。

    KUCKLUさん、ご丁寧にありがとうございます。
    サイトによって、説明がまちまちなので(^^;

    追加で質問です。
    テーマフォルダとは、wp-contentsのthemesの中にassetsフォルダを作る、
    という解釈で大丈夫ですか?

    上記の質問内容は、ご回答いただいた中に記載がありました。
    失礼しました。

    元になるテーマは、twenty tenです。
    プラグインとして、不動産プラグインを入れています。
    そして、印刷プレビューボタンは、
    Contact Form 7のフォームに設置しています。

    この場合、ご回答いただいた内容で大丈夫でしょうか?

    ご参考までに、jsファイルとcssファイルを記載します。

    —————————————————————————
    ●jsファイル

    function print_mode(){
    var str_link_text = “通常ページへ戻る”;
    if(document.getElementById(“print_mode_link”).innerHTML == str_link_text){
    location.reload(false);
    }
    else {
    document.getElementById(“print_mode_link”).innerHTML = str_link_text;
    try {
    document.getElementById(“footer_navi”).style.display = “none”;
    }
    }
    catch(e){
    //存在しない要素を確認(デバッグ用)
    //alert(e);
    }
    }
    }
    function isdefined(variable){
    return (typeof(window[variable]) == “undefined”)? false: true;
    }
    ———————————————————————–

    ●cssファイル

    @charset “UTF-8”;

    body.print {

    body {
    }
    #header,
    #side,
    #footer
    {
    /* 非表示 */
    display:none;
    }
    #content {
    /* 幅をブラウザに任せる */
    width: auto;
    padding: 0;
    float: none;
    background-color: #fff;
    }
    }

    @media print {
    /* 通常のプリントは見たままを印刷したい。 */
    /* 印刷ボタンを表示しているボックスだけ印刷時に非表示 */
    .btnBox {
    display:none;
    }
    }

    モデレーター gatespace

    (@gatespace)

    [モデレーターより]
    https://ja.forums.wordpress.org/topic/148051?replies=2
    上記の続きですか?

    途中でやること変わっても見てる人(回答する人)はわからないので、
    こういった場合はスレッド続けてください。

    ※今回はこちらに回答がついてますので、続いているのであれば、先のスレッドを閉鎖しますのでコメントください

    gatespaceさん、
    実質的に続きになってしまいました。
    済みません。

    はい、https://ja.forums.wordpress.org/topic/148051?replies=2
    は閉鎖してくだい。

    お手数をお掛けします。

    何度も追記済みません。
    動作の見本ページです。
    http://www.tokyo.bc.jrc.or.jp/

    このページの右上の「プリント」ボタンの動作です。

    僕が最初に回答させていただいた内容の一番下のソースコードを、使用中のテーマの functions.php に記載すれば、JS / CSS ファイルは読み込まれるはずです。
    試しに functions.php に記述後、ブラウザーでサイトを表示し右クリックからソースコードの表示をしてみると、読み込まれているのがわかると思います。あとは、JS / CSS をお好みに編集するとよいかと思います。

    サイトの仕様にもよりますが、プラグインで解決してしまうのもありかと思います。WordPress 公式ディレクトリで print などをキーワードに検索していただくと、色々みつかります。
    https://wordpress.org/plugins/search.php?q=print

    ありがとうございます。

    ブラウザで右クリックで確認したところ、
    読み込み自体がされてませんでした・・・

    各場所は、function.phpのどこでも大丈夫ですか?

    また、jsとcssフォルダをtwenty tenの直下に設置しました。
    その場合は、
    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.js’, array( ‘jquery’ ), false, 1 );
    }
    add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_scripts’ );

    とういう記述でよろしいでしょうか?
    assetを記述していません。

    また、不動産プラグインがカスタムフィールドを利用しています。
    カスタムフィールドを印刷プレビュー表示可能なプラグイン、ご存知ですか?

    はい、大丈夫です。
    wp-content/themes/twentyten/functions.php 内に記述していただければ大丈夫です。

    大丈夫なのですが、twentyten の子テーマを作ってカスタマイズされて方がいいと思います。
    twentyten のアップデートがあった場合、全てのカスタマズが無かったことになります。
    子テーマについては、日本語版 Codex をご一読ください。

    ありがとうございます。

    少し方針を変えました・・・
    http://aiai-housing.sakura.ne.jp/wp/?post_type=fudo&p=419?type=print
    みたいな感じで印刷用のテーマを呼びだそうかと思います。

    この場合、
    index-print.phpを作り、
    style-print.cssを作り、
    header-phpを作り、header-print.phpにstyle-print.cssを読み込むようにすれば大丈夫でしょうか?

    元のページ
    http://aiai-housing.sakura.ne.jp/wp/?post_type=fudo&p=419
    にindex-print.phpへのリンクボタンを作る予定です。

    どんどん難しい方向にいっていますが、大丈夫でしょうか?
    ただ印刷した時のレイアウトを綺麗にしたいだけであれば、特別 URL や 新規ウィンドウに拘る必要はないのかな?と思います。

    また

    返信先: jsの設置場所と読み込み方法

    ではなくて、http://aiai-housing.sakura.ne.jp/wp/?post_type=fudo&p=419&type=print ですよね・・・。

    この場合ですと、まず、type という URL パラメーターを WordPress が認識できるようにする必要があります。
    その上で、type の値を取得して、処理を行うという風になります。
    また、どのような形であれ、JS / CSS ファイルの読み込み方は変わりません。

    index-print.php は普通にやっては読み込まれないので、自力で読み込むなりしてあげないといけません。
    WordPress のテンプレートの読み込みはドキュメントに分かりやすい図がありますので、ご確認ください。

    ■テンプレート階層 | WordPress 日本語 Codex
    http://goo.gl/ahBXD

    ありがとうございます。
    jsの読み込みがどうしてもうまく出来ないのです・・・

    そうですね、
    http://aiai-housing.sakura.ne.jp/wp/?post_type=fudo&p=419&type=print
    の誤りです。

    この昨日は、
    印刷する前に印刷プレビューをページ内で確認したい、とのお客様の要望です。

    typeを認識させる方法と、index-print.phpを読み込む方法は、どうすれば良いですか?

    ドキュメント、確認いたします。

    プレビューしたい。が要望ということでしたら、こういうのでいかがですか?

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

    ありがとうございます。

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

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