wordpressで記事部分のみを画面イメージのまま出力したいですが良い方法はないでしょうか?wp-printも試しましたが、css適用部分のデザインが抜けていたりと画面イメージとは若干異なります。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/07/07 13:24:25
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:rouge_2008 No.2

回答回数595ベストアンサー獲得回数351

ポイント50pt

利用しているテーマの「style.css」に、印刷用のスタイルとして必要のない要素を表示しない記述を指定する方法はいかがでしょうか?(※「WP-Print」は利用しません。)
デフォルトテーマの「Twenty Twelve」の場合は、次のような記述を追加すると記事部分のみ印刷されます。

/* =Print
----------------------------------------------- */

@media print {
	header.site-header, #secondary, nav.nav-single, #comments, footer#colophon {
		display: none;
	}
}

※デフォルトで記述されている場合は、元の記述を他のファイル等にコピーして残しておき、ひとつずつ戻して印刷プレビューでどのような表示になるか確認しながら、記述を戻すかどうか決めるといいです。


上記とは別の方法として「WP-Print」を使う場合は、プラグインフォルダ内の「wp-print/print-posts.php」を変更するといいです。(このファイルが「WP-Print」の印刷ページ用のテンプレートとなっています。)
※利用しているテーマのフォルダ内に「print-css.css」という名前のCSSファイルを作成して、印刷用のスタイルを記述する必要があります。(※テーマの「style.css」から必要な箇所をコピーするといいです。)


【※追記※】

「WP-Print」の「readme.txt」には次のように記述されています。

= Custom Template =
* WP-Print will load 'print-css.css', 'print-posts.php' and 'print-comments.php' from your theme's directory if it exists.
* If it doesn't exists, it will just load the respective default file that comes with WP-Print.
* This will allow you to upgrade WP-Print without worrying about overwriting your printing styles or templates that you have created.


もし後者の方法を利用するのでしたら、プラグインの「print-posts.php」を変更するのではなく、利用しているテーマのフォルダ内にこの名前のファイルを作成するといいです。
※子テーマを利用している場合は、親テーマのフォルダ内に「print-posts.php」を作成する必要があります。
※子テーマを利用している場合でも、「style.css」は子テーマのフォルダ内に作成して大丈夫です。

id:kaji0245

ありがとうございます。
早速、試してみます<(_ _)>

2013/07/07 13:24:12

その他の回答1件)

id:dawakaki No.1

回答回数797ベストアンサー獲得回数122

ポイント50pt

WordPress で個別ページの記事部分を ajax で取得する
http://devlog.stereoism.com/archives/81

id:rouge_2008 No.2

回答回数595ベストアンサー獲得回数351ここでベストアンサー

ポイント50pt

利用しているテーマの「style.css」に、印刷用のスタイルとして必要のない要素を表示しない記述を指定する方法はいかがでしょうか?(※「WP-Print」は利用しません。)
デフォルトテーマの「Twenty Twelve」の場合は、次のような記述を追加すると記事部分のみ印刷されます。

/* =Print
----------------------------------------------- */

@media print {
	header.site-header, #secondary, nav.nav-single, #comments, footer#colophon {
		display: none;
	}
}

※デフォルトで記述されている場合は、元の記述を他のファイル等にコピーして残しておき、ひとつずつ戻して印刷プレビューでどのような表示になるか確認しながら、記述を戻すかどうか決めるといいです。


上記とは別の方法として「WP-Print」を使う場合は、プラグインフォルダ内の「wp-print/print-posts.php」を変更するといいです。(このファイルが「WP-Print」の印刷ページ用のテンプレートとなっています。)
※利用しているテーマのフォルダ内に「print-css.css」という名前のCSSファイルを作成して、印刷用のスタイルを記述する必要があります。(※テーマの「style.css」から必要な箇所をコピーするといいです。)


【※追記※】

「WP-Print」の「readme.txt」には次のように記述されています。

= Custom Template =
* WP-Print will load 'print-css.css', 'print-posts.php' and 'print-comments.php' from your theme's directory if it exists.
* If it doesn't exists, it will just load the respective default file that comes with WP-Print.
* This will allow you to upgrade WP-Print without worrying about overwriting your printing styles or templates that you have created.


もし後者の方法を利用するのでしたら、プラグインの「print-posts.php」を変更するのではなく、利用しているテーマのフォルダ内にこの名前のファイルを作成するといいです。
※子テーマを利用している場合は、親テーマのフォルダ内に「print-posts.php」を作成する必要があります。
※子テーマを利用している場合でも、「style.css」は子テーマのフォルダ内に作成して大丈夫です。

id:kaji0245

ありがとうございます。
早速、試してみます<(_ _)>

2013/07/07 13:24:12
  • id:standard_one
    記事部分のみってのがハードル高くしてますねぇ。
    まぁでも技術的には不可能ではないので外注雇う手はあるでしょうね、この案件で100万いくとは思えないし、色々探してみられてはいかがかと。
    詳細なあるいは具体的な解説は、はてなの回答領域では厳しんじゃないかなと思います。
    自分だったら中間サーバを立ててWPへのリクエストにワンクッション入れる方法をとります。
    WP得意な人だったらWP自体を改造するでしょうね、多分こっちのが早くて安いでしょう。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません