あなたのWordPressブログは印刷用ですか?

CSSを印刷する

昨日の投稿を完了したので ソーシャルメディアのROI、そのプレビューをDotsterCEOのClintPageに送信したいと思いました。 しかし、PDFに印刷したとき、ページはめちゃくちゃでした!

ウェブサイトのコピーを印刷して共有したり、後で参照したり、メモを付けてファイルしたりすることを好む人はまだたくさんいます。 私は自分のブログを印刷用にしたいと思いました。 思ったよりずっと楽でした。

印刷版を表示する方法:

これを実現するには、CSSの基本を理解する必要があります。 最も難しい部分は、ブラウザの開発者コンソールを使用して、CSSを記述できるように、コンテンツの表示、非表示、および調整をテストすることです。 Safariでは、開発者ツールを有効にし、ページを右クリックして、[コンテンツの検査]を選択する必要があります。 これにより、関連付けられている要素とCSSが表示されます。

Safariには、Webインスペクターにページの印刷バージョンを表示するためのちょっとしたオプションがあります。

Safari-Webインスペクターでの印刷ビュー

WordPressブログを印刷用にする方法:

印刷用のスタイルを指定するには、いくつかの異なる方法があります。 XNUMXつは、現在のスタイルシートに「印刷」のメディアタイプに固有のセクションを追加することです。

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

もうXNUMXつの方法は、印刷オプションを指定する特定のスタイルシートを子テーマに追加することです。 方法は次のとおりです。

  1. と呼ばれるテーマディレクトリに追加のスタイルシートをアップロードします print.css.
  2. に新しいスタイルシートへの参照を追加します のfunctions.php ファイル。 print.cssファイルは、親と子のスタイルシートの後にロードされ、スタイルが最後にロードされるようにする必要があります。 また、プラグインの後にロードされるように、このロードに優先度100を設定しました。これが私の参照のようになります。

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

これで、print.cssファイルをカスタマイズして、非表示にしたり表示を変えたりするすべての要素を変更できます。 たとえば、私のサイトでは、表示したいコンテンツのみが印刷されるように、すべてのナビゲーション、ヘッダー、サイドバー、およびフッターを非表示にしています。

My print.css ファイルは次のようになります。 最近のブラウザで受け入れられている方法であるマージンも追加したことに注意してください。

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

印刷ビューの外観

GoogleChromeから印刷した場合の印刷ビューは次のようになります。

WordPressの印刷ビュー

高度なプリントスタイリング

すべてのブラウザが同じように作成されているわけではないことに注意することが重要です。 各ブラウザをテストして、ページがブラウザ全体でどのように表示されるかを確認することをお勧めします。 コンテンツを追加したり、余白やページサイズを設定したり、その他の要素を追加したりするための高度なページ機能をサポートしているものもあります。 スマッシングマガジンは非常に これらの高度な印刷に関する詳細な記事 オプション。

左下に著作権の言及、右下にページカウンター、すべてのページの左上にドキュメントのタイトルを追加するために組み込んだページレイアウトの詳細を次に示します。

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2のコメント

  1. 1
  2. 2

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.