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のフォームに設置しています。どこが間違っているでしょうか?
ご教授お願いいたします。
-
ご指摘、ありがとうございます。
このサイトでは、single.phpとpage.phpは使用していないため、
取り急ぎfooter.phpにボタンを表示させました。
また、スタイルシート読み込みとURLパラメータ追加のコードは、
functions.phpに入れました。この状態でボタンをクリックしますが、
やはり、通常のページしか表示されません。何度も済みませんm(__)m
面倒かもしれませんが、founctions.php をここに貼り付けていただくことはできますか?
もし重要な情報が記載されているのでしたら、サンプル用に変えていただいて。
記載していただくさいは、code タグでソースコード全体を囲うようにしてください。原因として考えられるもの
- インストールしているプラグインが悪さしている
- テーマへの記述方法が間違っている
が可能性が高いです。
とりあえず、不動産プラグインは影響していないというのは確認済みです。有難うございます。
コードが長いので、分割して送ります。<?php /** * TwentyTen functions and definitions * * Sets up the theme and provides some helper functions. Some helper functions * are used in the theme as custom template tags. Others are attached to action and * filter hooks in WordPress to change core functionality. * * The first function, twentyten_setup(), sets up the theme by registering support * for various features in WordPress, such as post thumbnails, navigation menus, and the like. * * When using a child theme (see http://codex.wordpress.org/Theme_Development and * http://codex.wordpress.org/Child_Themes), you can override certain functions * (those wrapped in a function_exists() call) by defining them first in your child theme'tgs * functions.php file. The child theme's functions.php file is included before the parent * theme's file, so the child theme functions would be used. * * Functions that are not pluggable (not wrapped in function_exists()) are instead attached * to a filter or action hook. The hook can be removed by using remove_action() or * remove_filter() and you can attach your own function to the hook. * * We can remove the parent theme's hook only after it is attached, which means we need to * wait until setting up the child theme: * * <code> * add_action( 'after_setup_theme', 'my_child_theme_setup' ); * function my_child_theme_setup() { * // We are providing our own filter for excerpt_length (or using the unfiltered value) * remove_filter( 'excerpt_length', 'twentyten_excerpt_length' ); * ... * } * </code> * * For more information on hooks, actions, and filters, see http://codex.wordpress.org/Plugin_API. * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ /* * Set the content width based on the theme's design and stylesheet. * * Used to set the width of images and content. Should be equal to the width the theme * is designed for, generally via the style.css stylesheet. */ if ( ! isset( $content_width ) ) $content_width = 640; /* Tell WordPress to run twentyten_setup() when the 'after_setup_theme' hook is run. */ add_action( 'after_setup_theme', 'twentyten_setup' ); if ( ! function_exists( 'twentyten_setup' ) ): /** * Set up theme defaults and registers support for various WordPress features. * * Note that this function is hooked into the after_setup_theme hook, which runs * before the init hook. The init hook is too late for some features, such as indicating * support post thumbnails. * * To override twentyten_setup() in a child theme, add your own twentyten_setup to your child theme's * functions.php file. * * @uses add_theme_support() To add support for post thumbnails, custom headers and backgrounds, and automatic feed links. * @uses register_nav_menus() To add support for navigation menus. * @uses add_editor_style() To style the visual editor. * @uses load_theme_textdomain() For translation/localization support. * @uses register_default_headers() To register the default custom header images provided with the theme. * @uses set_post_thumbnail_size() To set a custom post thumbnail size. * * @since Twenty Ten 1.0 */ function twentyten_setup() { // This theme styles the visual editor with editor-style.css to match the theme style. add_editor_style(); // Post Format support. You can also use the legacy "gallery" or "asides" (note the plural) categories. add_theme_support( 'post-formats', array( 'aside', 'gallery' ) ); // This theme uses post thumbnails add_theme_support( 'post-thumbnails' ); // Add default posts and comments RSS feed links to head add_theme_support( 'automatic-feed-links' ); /* * Make theme available for translation. * Translations can be filed in the /languages/ directory */ load_theme_textdomain( 'twentyten', get_template_directory() . '/languages' ); // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'twentyten' ), ) ); // This theme allows users to set a custom background. add_theme_support( 'custom-background', array( // Let WordPress know what our default background color is. 'default-color' => 'f1f1f1', ) ); // The custom header business starts here. $custom_header_support = array( /* * The default image to use. * The %s is a placeholder for the theme template directory URI. */ 'default-image' => '%s/images/headers/path.jpg', // The height and width of our custom header. /** * Filter the Twenty Ten default header image width. * * @since Twenty Ten 1.0 * * @param int The default header image width in pixels. Default 940. */ 'width' => apply_filters( 'twentyten_header_image_width', 940 ), /** * Filter the Twenty Ten defaul header image height. * * @since Twenty Ten 1.0 * * @param int The default header image height in pixels. Default 198. */ 'height' => apply_filters( 'twentyten_header_image_height', 198 ), // Support flexible heights. 'flex-height' => true, // Don't support text inside the header image. 'header-text' => false, // Callback for styling the header preview in the admin. 'admin-head-callback' => 'twentyten_admin_header_style', ); add_theme_support( 'custom-header', $custom_header_support ); if ( ! function_exists( 'get_custom_header' ) ) { // This is all for compatibility with versions of WordPress prior to 3.4. define( 'HEADER_TEXTCOLOR', '' ); define( 'NO_HEADER_TEXT', true ); define( 'HEADER_IMAGE', $custom_header_support['default-image'] ); define( 'HEADER_IMAGE_WIDTH', $custom_header_support['width'] ); define( 'HEADER_IMAGE_HEIGHT', $custom_header_support['height'] ); add_custom_image_header( '', $custom_header_support['admin-head-callback'] ); add_custom_background(); } /* * We'll be using post thumbnails for custom header images on posts and pages. * We want them to be 940 pixels wide by 198 pixels tall. * Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php. */ set_post_thumbnail_size( $custom_header_support['width'], $custom_header_support['height'], true ); // ... and thus ends the custom header business. // Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI. register_default_headers( array( 'berries' => array( 'url' => '%s/images/headers/berries.jpg', 'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Berries', 'twentyten' ) ), 'cherryblossom' => array( 'url' => '%s/images/headers/cherryblossoms.jpg', 'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Cherry Blossoms', 'twentyten' ) ), 'concave' => array( 'url' => '%s/images/headers/concave.jpg', 'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Concave', 'twentyten' ) ), 'fern' => array( 'url' => '%s/images/headers/fern.jpg', 'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Fern', 'twentyten' ) ), 'forestfloor' => array( 'url' => '%s/images/headers/forestfloor.jpg', 'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Forest Floor', 'twentyten' ) ), 'inkwell' => array( 'url' => '%s/images/headers/inkwell.jpg', 'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Inkwell', 'twentyten' ) ), 'path' => array( 'url' => '%s/images/headers/path.jpg', 'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Path', 'twentyten' ) ), 'sunset' => array( 'url' => '%s/images/headers/sunset.jpg', 'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Sunset', 'twentyten' ) ) ) ); } endif; if ( ! function_exists( 'twentyten_admin_header_style' ) ) : /** * Style the header image displayed on the Appearance > Header admin panel. * * Referenced via add_custom_image_header() in twentyten_setup(). * * @since Twenty Ten 1.0 */ function twentyten_admin_header_style() { ?> <style type="text/css" id="twentyten-admin-header-css"> /* Shows the same border as on front end */ #headimg { border-bottom: 1px solid #000; border-top: 4px solid #000; } /* If header-text was supported, you would style the text with these selectors: #headimg #name { } #headimg #desc { } */ </style> <?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' ); ?> <?php } endif;
/** * Show a home link for our wp_nav_menu() fallback, wp_page_menu(). * * To override this in a child theme, remove the filter and optionally add * your own function tied to the wp_page_menu_args filter hook. * * @since Twenty Ten 1.0 * * @param array $args An optional array of arguments. @see wp_page_menu() */ function twentyten_page_menu_args( $args ) { if ( ! isset( $args['show_home'] ) ) $args['show_home'] = true; return $args; } add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' ); /** * Set the post excerpt length to 40 characters. * * To override this length in a child theme, remove the filter and add your own * function tied to the excerpt_length filter hook. * * @since Twenty Ten 1.0 * * @param int $length The number of excerpt characters. * @return int The filtered number of excerpt characters. */ function twentyten_excerpt_length( $length ) { return 40; } add_filter( 'excerpt_length', 'twentyten_excerpt_length' ); if ( ! function_exists( 'twentyten_continue_reading_link' ) ) : /** * Return a "Continue Reading" link for excerpts. * * @since Twenty Ten 1.0 * * @return string "Continue Reading" link. */ function twentyten_continue_reading_link() { return ' <a href="'. get_permalink() . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) . '</a>'; } endif; /** * Replace "[...]" with an ellipsis and twentyten_continue_reading_link(). * * "[...]" is appended to automatically generated excerpts. * * To override this in a child theme, remove the filter and add your own * function tied to the excerpt_more filter hook. * * @since Twenty Ten 1.0 * * @param string $more The Read More text. * @return string An ellipsis. */ function twentyten_auto_excerpt_more( $more ) { if ( ! is_admin() ) { return ' …' . twentyten_continue_reading_link(); } return $more; } add_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' ); /** * Add a pretty "Continue Reading" link to custom post excerpts. * * To override this link in a child theme, remove the filter and add your own * function tied to the get_the_excerpt filter hook. * * @since Twenty Ten 1.0 * * @param string $output The "Coninue Reading" link. * @return string Excerpt with a pretty "Continue Reading" link. */ function twentyten_custom_excerpt_more( $output ) { if ( has_excerpt() && ! is_attachment() && ! is_admin() ) { $output .= twentyten_continue_reading_link(); } return $output; } add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' ); /** * Remove inline styles printed when the gallery shortcode is used. * * Galleries are styled by the theme in Twenty Ten's style.css. This is just * a simple filter call that tells WordPress to not use the default styles. * * @since Twenty Ten 1.2 */ add_filter( 'use_default_gallery_style', '__return_false' ); /** * Deprecated way to remove inline styles printed when the gallery shortcode is used. * * This function is no longer needed or used. Use the use_default_gallery_style * filter instead, as seen above. * * @since Twenty Ten 1.0 * @deprecated Deprecated in Twenty Ten 1.2 for WordPress 3.1 * * @return string The gallery style filter, with the styles themselves removed. */ function twentyten_remove_gallery_css( $css ) { return preg_replace( "#<style type='text/css'>(.*?)</style>#s", '', $css ); } // Backwards compatibility with WordPress 3.0. if ( version_compare( $GLOBALS['wp_version'], '3.1', '<' ) ) add_filter( 'gallery_style', 'twentyten_remove_gallery_css' ); if ( ! function_exists( 'twentyten_comment' ) ) : /** * Template for comments and pingbacks. * * To override this walker in a child theme without modifying the comments template * simply create your own twentyten_comment(), and that function will be used instead. * * Used as a callback by wp_list_comments() for displaying the comments. * * @since Twenty Ten 1.0 * * @param object $comment The comment object. * @param array $args An array of arguments. @see get_comment_reply_link() * @param int $depth The depth of the comment. */ function twentyten_comment( $comment, $args, $depth ) { $GLOBALS['comment'] = $comment; switch ( $comment->comment_type ) : case '' : ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-author vcard"> <?php echo get_avatar( $comment, 40 ); ?> <?php printf( __( '%s <span class="says">says:</span>', 'twentyten' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?> </div><!-- .comment-author .vcard --> <?php if ( $comment->comment_approved == '0' ) : ?> <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentyten' ); ?></em> <br /> <?php endif; ?> <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> <?php /* translators: 1: date, 2: time */ printf( __( '%1$s at %2$s', 'twentyten' ), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' ); ?> </div><!-- .comment-meta .commentmetadata --> <div class="comment-body"><?php comment_text(); ?></div> <div class="reply"> <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> </div><!-- .reply --> </div><!-- #comment-## --> <?php break; case 'pingback' : case 'trackback' : ?> <li class="post pingback"> <p><?php _e( 'Pingback:', 'twentyten' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' ); ?></p> <?php break; endswitch; } endif;
/** * Register widgetized areas, including two sidebars and four widget-ready columns in the footer. * * To override twentyten_widgets_init() in a child theme, remove the action hook and add your own * function tied to the init hook. * * @since Twenty Ten 1.0 * * @uses register_sidebar() */ function twentyten_widgets_init() { // Area 1, located at the top of the sidebar. register_sidebar( array( 'name' => __( 'Primary Widget Area', 'twentyten' ), 'id' => 'primary-widget-area', 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Area 2, located below the Primary Widget Area in the sidebar. Empty by default. register_sidebar( array( 'name' => __( 'Secondary Widget Area', 'twentyten' ), 'id' => 'secondary-widget-area', 'description' => __( 'An optional secondary widget area, displays below the primary widget area in your sidebar.', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Area 3, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'First Footer Widget Area', 'twentyten' ), 'id' => 'first-footer-widget-area', 'description' => __( 'An optional widget area for your site footer.', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Area 4, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'Second Footer Widget Area', 'twentyten' ), 'id' => 'second-footer-widget-area', 'description' => __( 'An optional widget area for your site footer.', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Area 5, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'Third Footer Widget Area', 'twentyten' ), 'id' => 'third-footer-widget-area', 'description' => __( 'An optional widget area for your site footer.', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); // Area 6, located in the footer. Empty by default. register_sidebar( array( 'name' => __( 'Fourth Footer Widget Area', 'twentyten' ), 'id' => 'fourth-footer-widget-area', 'description' => __( 'An optional widget area for your site footer.', 'twentyten' ), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } /** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */ add_action( 'widgets_init', 'twentyten_widgets_init' ); /** * Remove the default styles that are packaged with the Recent Comments widget. * * To override this in a child theme, remove the filter and optionally add your own * function tied to the widgets_init action hook. * * This function uses a filter (show_recent_comments_widget_style) new in WordPress 3.1 * to remove the default style. Using Twenty Ten 1.2 in WordPress 3.0 will show the styles, * but they won't have any effect on the widget in default Twenty Ten styling. * * @since Twenty Ten 1.0 */ function twentyten_remove_recent_comments_style() { add_filter( 'show_recent_comments_widget_style', '__return_false' ); } add_action( 'widgets_init', 'twentyten_remove_recent_comments_style' ); if ( ! function_exists( 'twentyten_posted_on' ) ) : /** * Print HTML with meta information for the current post-date/time and author. * * @since Twenty Ten 1.0 */ function twentyten_posted_on() { printf( __( '<span class="%1$s">Posted on</span> %2$s <span class="meta-sep">by</span> %3$s', 'twentyten' ), 'meta-prep meta-prep-author', sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span class="entry-date">%3$s</span></a>', get_permalink(), esc_attr( get_the_time() ), get_the_date() ), sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s">%3$s</a></span>', get_author_posts_url( get_the_author_meta( 'ID' ) ), esc_attr( sprintf( __( 'View all posts by %s', 'twentyten' ), get_the_author() ) ), get_the_author() ) ); } endif;
サーバー側でエラー止めてるんですね。
印刷プレビュー用のソースコードの貼り付け方が間違っています。
if ( ! function_exists( 'twentyten_admin_header_style' ) ) : /** * Style the header image displayed on the Appearance > Header admin panel. * * Referenced via add_custom_image_header() in twentyten_setup(). * * @since Twenty Ten 1.0 */ function twentyten_admin_header_style() { ?> <style type="text/css" id="twentyten-admin-header-css"> /* Shows the same border as on front end */ #headimg { border-bottom: 1px solid #000; border-top: 4px solid #000; } /* If header-text was supported, you would style the text with these selectors: #headimg #name { } #headimg #desc { } */ </style> <?php } endif; //印刷プレビュー用// 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' );
function ( 関数 ) の中に更に function ( 関数 ) が入ってる状態になっています。
該当部分を上記のに変えていただければ動くかとおもいます。長いコードの投稿にはペーストビンサービスを使用してください。
ありがとうございます。
動作しましたが、
印刷プレビューの画面と通常の画面が逆になってしまいます。
普通にサイトを開くとヘッダーとフッターがなく、
印刷プレビューをクリックすると、ヘッダーとフッターが表示されます。どこかの記述が逆転してるのでしょうか?
失礼いたしました。
$media = 'print' === get_query_var( 'type' ) ? 'all' : 'print';
こうですね。すみません。
KUCKLUさん
主要ブラウザにて、無事動作確認いたしました。
あとは、ボタンのデザインと配置場所を検討いたします。この度は、長い時間辛抱強くお付き合い頂き、本当にありがとうございました。
大変勉強になりました。お疲れ様でした。
なかなか解決に導けずにすみませんでした !ここまできてあれなのですが、プラグインを作ってみましたのでよかったら・・・(汗)
本当は最低限の審査を通ってからと思っていたので出さなかったのですが、審査がなかなか混み合っているようで。ライセンスは WordPress と同じですので、自由に使ってください。
https://github.com/kuck1u/va-print-preview※いまさらで、すみませんorz
- トピック「jsの設置場所と読み込み方法」には新たに返信することはできません。