Bestimmte Bereiche einer Seite drucken

Gelöst

(@wpintheflow)

Hallo Gemeinde, ich brauche bitte Hilfe damit ich Teile einer Site ausdrucken kann. Es handelt sich um den Aufbau einer digitalen Speisekarte. Der Gast soll im Restaurant den QR Code scannen um die Tagesspeisekarte aufs Handy zu bekommen. Wenn die Tagesspeisekarte am Morgen für den entsprechenden Tag eingepflegt ist, sollte die Möglichkeit bestehen die Karte einfach auszudrucken. Notfalls mit strg und p oder noch besser mit Hilfe eines Buttons. Damit das so simpel wie möglich ist für den der das benutzt. Unter https://codex.wordpress.org/Styling_for_Print ist eine tolle Anleitung nur reicht mein Wissen nicht aus wohin ich was schreiben soll. Das einzige was ich verstehe ist wohin ich den CSS Code schreibe. Der andere Code gehört vermutlich da schon nicht mehr hin :-). Hier mal ein Screenshot Von der Tagesspeisekarte sollen nur die Punkte: Vorspeisen, Hauptspeisen und Nachspeisen ausgedruckt werden. Der Ausdruck ist dafür gedacht, dass wir ihn in die Normale Papierspeisekarte einlegen, dass auch Menschen die mit Technik nichts am Hut haben bequem im Restaurant bestellen können. Ich weiß notfalls geht auch Copy paste und in ein Worddoc einfügen aber ich hätte es gern so einfach wie es geht, dass das auch jeder bedienen kann ohne einen längeren Workflow. Würde mich sehr freuen über Ideen.

Liebe Grüße Jochen


### wp-core ###

version: 5.8.3
site_language: de_DE
user_language: de_DE
timezone: Europe/Berlin
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /usr/www/users/alpenn
wordpress_size: 47,51 MB (49822202 bytes)
uploads_path: /usr/www/users/alpenn/wp-content/uploads
uploads_size: 66,05 MB (69260326 bytes)
themes_path: /usr/www/users/alpenn/wp-content/themes
themes_size: 23,97 MB (25132183 bytes)
plugins_path: /usr/www/users/alpenn/wp-content/plugins
plugins_size: 32,70 MB (34283979 bytes)
database_size: 10,42 MB (10928128 bytes)
total_size: 180,65 MB (189426818 bytes)

### wp-active-theme ###

name: Avada (Avada)
version: 7.0.1
author: ThemeFusion
author_website: http://themeforest.net/user/ThemeFusion
parent_theme: none
theme_features: core-block-patterns, fusion-builder-options, widgets-block-editor, title-tag, automatic-feed-links, custom-header, custom-background, woocommerce, wc-product-gallery-slider, wc-product-gallery-lightbox, post-formats, post-thumbnails, fusion-builder-demos, menus, align-wide, wp-block-styles, editor-styles, editor-font-sizes, widgets
theme_path: /usr/www/users/alpenn/wp-content/themes/Avada
auto_update: Deaktiviert

### wp-plugins-active (5) ###

Avada Builder: version: 3.0.1, author: ThemeFusion, Automatische Aktualisierungen deaktiviert
Avada Core: version: 5.0.1, author: ThemeFusion, Automatische Aktualisierungen deaktiviert
Duplicator: version: 1.4.3, author: Snap Creek, Automatische Aktualisierungen deaktiviert
Print-O-Matic: version: 2.1.3, author: twinpictures, Automatische Aktualisierungen deaktiviert
Yoast Duplicate Post: version: 4.3, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen deaktiviert

### wp-plugins-inactive (2) ###

Akismet Anti-Spam: version: 4.2.1, author: Automattic, Automatische Aktualisierungen aktiviert
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Automatische Aktualisierungen aktiviert

### wp-media ###

image_editor: WP_Image_Editor_GD
imagick_module_version: Nicht verfügbar
imagemagick_version: Nicht verfügbar
imagick_version: Nicht verfügbar
file_uploads: File uploads is turned off
post_max_size: 50M
upload_max_filesize: 50M
max_effective_size: 50 MB
max_file_uploads: 20
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: 9.27

### wp-server ###

server_architecture: Linux 4.19.0-18-amd64 x86_64
httpd_software: Apache
php_version: 7.4.27 64bit
php_sapi: cgi-fcgi
max_input_variables: 1000
time_limit: 60
memory_limit: 128M
admin_memory_limit: 256M
max_input_time: -1
upload_max_filesize: 50M
php_post_max_size: 50M
curl_version: 7.64.0 OpenSSL/1.1.1d
suhosin: false
imagick_availability: false
pretty_permalinks: true
htaccess_extra_rules: false

### wp-database ###

extension: mysqli
server_version: 5.7.36-1
client_version: mysqlnd 7.4.27

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /usr/www/users/alpenn/wp-content
WP_PLUGIN_DIR: /usr/www/users/alpenn/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_LOCAL_DEV: undefined
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten

Wen du eine Speisekarte sauber formatiert auf einem beliebigen Drucker ausdrucken möchtest, sind pdf-Dateien am besten geeignet. Die kannst du dann wie eine Mediendatei hochladen und in deinen Webseiten als Link oder auch als Vorschau mit einem pdf-Block einbinden.

Oft findest du Rezeptseiten, die erst ausführlich erklären, wie der Autor zu einem Rezept gekommen ist, was beim ersten Versuch schief gelaufen ist und wieso Tante Helga ganz entzückt war, weil sie das Gericht an ihre Jugendliebe erinnert hat, die sie damals am Timmendorfer Strand … und eigentlich möchtest du nur das verdammte Rezept ausdrucken, damit du einen Spickzettel für die Küche hast. In diesem Fall kann z.B. das Plugin Print-O-Matic hilfreich sein, bei dem du Druckbereiche festlegen und einen Printer-Button hinzufügen kannst. Hier rasch die Einrichtung des Plugins:

Unter Einstellungen > Print-O-Matic (1) habe ich angegeben, dass die CSS-Klasse .druckmich (2) für den Druck verwendet werden soll. Außerdem möchte ich ein großes Drucker-Icon hinzufügen (3).

(zum Vergrößern anklicken)

Dann habe ich eine neue Seite erstellt, bei der ein langer (Blind-)Text (4) nicht ausgedruckt werden soll. Der Zutatenliste (5) und Anleitung (6) habe ich in der Sidebar jeweils die CSS-Klasse druckmich (hier ohne den Punkt) zugewiesen (7). Um noch das Drucker-Icon hinzuzufügen, habe ich den Shortcode (8) eingefügt. Das Plugin hat eine eigene Website, in der das alles ausführlich beschrieben wird. Außerdem kannst du eigene CSS-Regeln für Print-Styles angeben, einen anderen Header und Footer verwenden (z.B. mit dem Logo eines Restaurants) und noch einiges mehr.

(zum Vergrößern anklicken)

Im Plugin-Verzeichnis findest du noch eine Reihe weiterer Plugins, die zum Thema passen. Du musst selber entscheiden, welches für dich am besten geeignet ist.
pezi
(@pezi)

vor 2 Jahren, 3 Monaten
Hallo @wpintheflow !

Leider kann ich aus dem Screenshot nicht viel ableiten, außer dass die CSS Befehle mit @media print {} schon der richtige Ansatz sein könnten.
Auch die verlinkte Anleitung lese ich mal nicht, weil mir ewigen Laien das zu hoch wäre.

Aber es könnte relativ einfach gehen.
Man müsste ein Druck-Stylesheet machen, welches alles rundherum ausblendet (Header, Navi, …) und nur die Speisekarte für die Druckausgabe herzeigt.

Also wenn ich eine Speisekarte als Bild oder als Text habe, würde ich das in ein <DIV class=“speisekarte“> einbetten. Und nur dieses Element, dieses DIV für den Druck zeigen lassen.
```
@media print {
    .speisekarte { display: block; } 
    .alle_anderen_elemente { display: none; }
  }
```
würde beim Klick auf „Drucken“ (im Browser) nur das DIV mit der Klasse „speisekarte“ drucken. (Die Druck-Vorschau sollte auch nur das eine Element zeigen)

Das ist alles ein bissl vage, theoretisch, aber es funktioniert sicher.
pezi
(@pezi)

vor 2 Jahren, 3 Monaten

Und ich dachte ich wäre (mit meinem einfachen Ansatz) der erste …

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten

@pezi Den Moderatoren steht eine KI „Forum Minority Report“ zur Verfügung, die schon eine halbe Stunde vorher anzeigt, welche Fragen gestellt werden. Das gibt uns genug Zeit, eine Antwort zu schreiben, bevor der Thread überhaupt erscheint … 😉

Und jetzt noch ein hoffentlich sinnvollerer Beitrag:

Ein eigenes Print-Stylesheet ist sicher genauso sinnvoll, setzt aber Grundkenntnisse in CSS voraus. Deshalb hatte ich mich in meiner Antwort ein Plugin bevorzugt.

pezi
(@pezi)

vor 2 Jahren, 3 Monaten

Das Plugin kannte ich noch nicht, scheint aber auch die einfachere Lösung für die meisten.

PS: Weiß eure KI, was bei uns heute auf der Speisekarte steht?
PS 2: Mahlzeit!

Thread-Starter wpintheflow
(@wpintheflow)

vor 2 Jahren, 3 Monaten

@pezi
vielen herzlichen Dank für die Mühe und den Code Schnipsel. Das funzt absolut 🙂 habs gleich ausprobiert. Was ich hier jetzt nicht kapiert habe wie ich: header, menü und footer ausblende. Hier hab ich keine Möglichkeit die class „alle_anderen_elemente“ unterzubringen? Das finde ich aber noch raus. Ich werde mich aber auf Print o matic konzentrieren, da mir bei dem Plugin der Printbutton zu Verfügung steht.

Thread-Starter wpintheflow
(@wpintheflow)

vor 2 Jahren, 3 Monaten

@bego Mario Garde wow, Hammer. Dankeschön für die ausführliche Anleitung. Funktioniert perfekt. Was ich noch nicht begriffen hab ist wie ich etwas ausblenden kann. Hier gibt es das
Do Not Print Attribute
Use the do_not_print attribute to prevent content elements inside the target container from being printed. The following code would display but not print any elements assigned a class of “noprint”.

[print-me do_not_print=“.noprint“/]`

Ich hab versucht das Element das ausgeblendet werden soll die css class noprint zu zuweisen. Das bleibt aber ohne Erfolg. Kannst du mir bitte sagen ob ich etwas übersehe. Viele Grüße und einen schönen Abend Jochen

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)

Das Thema „Bestimmte Bereiche einer Seite drucken“ ist für neue Antworten geschlossen.

Bestimmte Bereiche einer Seite drucken

Themen-Schlagwörter

Ansichten