AFFINGER4で見たまま印刷をしたい

Question

###前提・実現したいこと
AFFINGER4でサイトを見たまま印刷したいのですが、「wordpress 見たまま印刷」で出てくる内容で書かれていることと該当するソースコードがなく、困っています。

サイトはほぼ完成しているので、『オリジナルテーマカスタマイザーを使用する』のチェックは外さずに見たまま印刷できるようにしたいです。

###試したこと
wordpressの見たまま印刷で検索すると、<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen, projection”>に
, printを追加する方法と、
style.cssをprint.cssに変えて読み込む方法が載っていますが、AFFINGER4のheader.phpやfunction.phpに<link rel=”stylesheet”から始まるソースコードがなく、どこに追加すれば良いのか分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
wordpress バージョン 4.8.2
テーマ　AFFINGER4
『オリジナルテーマカスタマイザーを使用する』使用中

Answer 1

AFFINGER4 は、おそらくアフリエイト専用の有料テーマですね。

「AFFINGER4で見たまま印刷をしたい」ということですが、現在、どのような CSS を使って、どのように表示されていて、印刷した結果がどうなっているのかが、他の人にはわかりませんから一般論で書いています。

---

A．テーマで使用している CSS が、画面専用に指定されている場合

1.テーマのテンプレートを確認して、CSS ファイルの指定が、下記のように「media="screen"」が、付いていたら以下のように「media="all"」にします。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">

　　↓

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="all">

2.印刷してうまくいったら終わり。
うまくいかない場合は、Bの印刷用最適化の方法で、印刷用のCSSファイルを作成する必要がある。

---

B. CSSが、印刷用に最適化されていない場合。

1.印刷用の CSSファイル (例:print.css)を style.css をコピーして、style.css と同じ場所に作成します。

2.print.css をテーマで読み込めるように　各テンプレートファイルに　以下のように media=print をつけた css ファイルの指定を追加します。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="all">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>print.css" media="print">

3.印刷した結果が、「見たまま」になるように print.css を調整します。

4.印刷結果が、画面と同じように調整できれば完成。

---

(追記)
コメントをいただいたので、ちょっと追記します。

テンプレートファイルに　CSS を追加している行が見つからないということですので、おそらく functions.php で　wp_enqueue_scripts フックを使って追加していると思います。

functions.php に wp_enqueue_style() を使っている下記のような部分はないでしょうか？　

例：(関数リファレンス/wp_enqueue_style より引用。関数名や変数名は異なります。)

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

(詳しくは、関数リファレンス/wp_enqueue_style 参照)

Comments

[nisimcy]

ご指摘のあった通り、AFFINGER4は有料のテーマです。
「wordpress 見たまま印刷」で検索すると、CHERRYさんが回答して下さった内容は出てきるのですが、質問内容はそのcssを入れる場所が分からなくて困っているのです。
通常、header.phpやfunction.phpなどにご指摘いただいた<link rel="stylesheet" …>が書かれていると思うのですが、AFFINGER4のどこを探してもそのcssが見つからないので、CHERRYさんの回答を試すことも出来ません。

分かりやすい回答をいただき、ありがとうございました。全部のphpファイルを載せることも出来ないので、もう一度自力で探して、見つかったら回答いただいたcssを試してみます。

[CHERRY]

functions.php ファイルの中で、wp_enqueue_scripts フックを使って、CSS ファイルを追記する方法について、追記しました。 こちらも確認してみてください。

Answer 2

AFFINGER4とは何なのでしょうか？カスタマイザーやCSSの話しが出ているのでテーマかと思いますが、一般配布されてる物ならサイトのURLや更にはダウンロードURLを載せておくと、もう少しマシな回答があるかもしれません。

印刷に適した画面を出力するにはCSSで@media printを定義してスタイルを調整するか印刷用のCSSを作って読み込ませるなどの方法がありますが、ブラウザによって表示が異なったりもするのでどんな方法でも見たままは難しいと思います。
@media printなどの文言で調べてみてください。

Comments

[nisimcy]

説明不足で申し訳ありませんでした。
AFFINGER4は有料のwordpressテーマです。http://the-money.net/
テーマを使用したサンプルは　http://af-themewp.com/　です。

<link rel="stylesheet" …>を記述している場所が見つからないので、現時点では試すことも出来ませんが、もう一度探してみて回答いただいたことを試してみます。
回答いただき、ありがとうございました。