איז דיין WordPress בלאָג פּרינטער-פרייַנדלעך?

דרוקן CSS

ווי איך געענדיקט דעם פּאָסטן נעכטן אויף סאציאל מעדיע ראָי, איך געוואלט צו שיקן אַ פאָרויסיקע ווייַזונג פון עס צו דאָטסטער סעאָ קלינט Page. ווען איך האָב געדרוקט צו אַ PDF, די בלאַט איז אָבער אַ באַלאַגאַן!

עס זענען נאָך פילע מענטשן דאָרט ווי צו דרוקן עקזעמפלארן פון אַ וועבזייטל צו טיילן, דערמאָנען שפּעטער, אָדער נאָר טעקע עטלעכע הערות. איך באַשלאָסן איך וואָלט ווי צו מאַכן מיין בלאָג פּרינטער-פרייַנדלעך. עס איז געווען פיל גרינגער ווי איך געדאַנק עס וואָלט זיין.

ווי צו ווייַזן דיין דרוק ווערסיע:

איר דאַרפֿן צו פֿאַרשטיין די באַסיקס פון CSS צו דערגרייכן דעם. די מערסט שווער טייל איז ניצן די דעוועלאָפּער קאַנסאָול פון דיין בלעטערער צו פּרובירן ווייַזנדיק, כיידינג און אַדזשאַסטינג די אינהאַלט אַזוי אַז איר קענען שרייַבן דיין CSS. אין Safari, איר דאַרפֿן צו געבן די דעוועלאָפּער מכשירים, רעכט גיט דיין בלאַט און סעלעקטירן דורכקוק אינהאַלט. וואָס וועט ווייַזן איר די עלעמענט און CSS פארבונדן.

Safari האט אַ פייַן ביסל אָפּציע צו אַרויסווייַזן די דרוק ווערסיע פון ​​דיין בלאַט אויף די וועב ינספּעקטאָר:

סאַפאַרי - פּרינט View אין וועב ינספּעקטאָר

ווי צו מאַכן דיין וואָרדפּרעסס בלאָג פּרינטער-פרייַנדלעך:

עס זענען עטלעכע וועגן צו ספּעציפיצירן דיין סטילינג פֿאַר דרוק. איינער איז נאָר צו לייגן אַ אָפּטיילונג אין דיין קראַנט סטילעשעעט וואָס איז ספּעציפיש פֿאַר די מידיאַ טיפּ פון "דרוק".

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

די אנדערע וועג איז צו לייגן אַ ספּעציפיש נוסח בלאַט צו דיין קינד טעמע וואָס ספּעציפיצירן די דרוק אָפּציעס. דאָ ס ווי:

  1. צופֿעליקער אַן נאָך סטילעשעעט צו דיין טעמע וועגווייַזער גערופן print.css.
  2. לייג אַ דערמאָנען צו די נייַע סטילעשעעט אין דיין פונקטיאָנס.פפּ טעקע. איר וועט וועלן צו ענשור אַז דיין פּרינט.קסס טעקע איז לאָודיד נאָך דיין פאָטער און קינד סטילעשעעט אַזוי אַז די סטיילז זענען לאָודיד לעצט. איך האָב אויך געשטעלט אַ בילכערקייַט פון 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);

איצט איר קענען קאַסטאַמייז די פּרינט.קסס טעקע און מאָדיפיצירן אַלע די עלעמענטן וואָס איר ווילט אַנדערש אָדער אַנדערש. אין מיין פּלאַץ, פֿאַר בייַשפּיל, איך באַהאַלטן אַלע די נאַוויגאַציע, כעדערז, סיידבאַרז און פאָאָטערס אַזוי אַז בלויז די אינהאַלט וואָס איך ווינטשן צו דרוקן איז געדרוקט.

My print.css טעקע קוקט ווי דאָס. באמערקט אַז איך אויך צוגעגעבן מאַרדזשאַנז, אַ אופֿן וואָס איז אנגענומען דורך מאָדערן בראַוזערז:

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

ווי די דרוק מיינונג קוקט

דאָ איז ווי מיין דרוק מיינונג קוקט אויב עס איז געדרוקט פֿון Google Chrome:

וואָרדפּרעסס פּרינט View

אַוואַנסירטע פּרינט סטילינג

עס איז וויכטיק צו טאָן אַז ניט אַלע בראַוזערז זענען באשאפן גלייך. איר קען וועלן צו פּרובירן יעדער בלעטערער צו זען ווי דיין בלאַט קוקט אויף זיי. עטלעכע שטיצן אפילו עטלעכע אַוואַנסירטע בלאַט פֿעיִקייטן צו לייגן אינהאַלט, שטעלן מאַרדזשאַנז און בלאַט סיזעס און עטלעכע אנדערע עלעמענטן. סמאַשינג מאַגאַזין האט אַ זייער דיטיילד אַרטיקל אויף די אַוואַנסירטע דרוק אָפּציעס.

דאָ ס עטלעכע בלאַט אויסלייג דעטאַילס וואָס איך ינקאָרפּערייטיד צו לייגן אַ דרוקרעכט דערמאָנען אין די לינקס לינקס, אַ בלאַט טאָמבאַנק רעכט אונטן און די דאָקומענט טיטל אין די שפּיץ לינקס פון יעדער בלאַט:

@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;
  }
}

קסנומקס באַמערקונגען

  1. 1
  2. 2

וואָס טאָן איר טראַכטן?

דעם פּלאַץ ניצט אַקיסמעט צו רעדוצירן ספּאַם. לערן ווי דיין קאָמענטאַר דאַטע איז פּראַסעסט.