こんにちわ、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;
}
}
[モデレーターより]
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 や 新規ウィンドウに拘る必要はないのかな？と思います。
また
http://aiai-housing.sakura.ne.jp/wp/?post_type=fudo&p=419?type=print
ではなくて、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)
