Ձեր WordPress Բլոգը տպա՞ն է:

Տպիր CSS- ը

Երբ ես ավարտեցի երեկվա գրառումը Սոցիալական մեդիայի ROI- ն, Ես ուզում էի դրա նախադիտումը ուղարկել Dotster- ի գործադիր տնօրեն Քլինթ Փեյջին: Երբ տպեցի PDF- ի վրա, էջը խառնաշփոթ էր:

Այնտեղ դեռ շատ մարդիկ կան, ովքեր սիրում են տպել կայքի պատճենները ՝ տարածելու, ավելի ուշ հղումներ կատարելու կամ պարզապես որոշ նշումներ կատարելու համար: Ես որոշեցի, որ ուզում եմ իմ բլոգը դարձնել տպիչ: Դա շատ ավելի հեշտ էր, քան կարծում էի, որ կլինի:

Ինչպե՞ս ցուցադրել ձեր տպագիր տարբերակը.

Դա անելու համար հարկավոր է հասկանալ CSS- ի հիմունքները: Ամենադժվարը ձեր զննարկչի մշակողի մխիթարի օգտագործումն է `բովանդակությունը ցուցադրելու, թաքցնելու և կարգավորելու համար, որպեսզի կարողանաք գրել ձեր CSS- ն: Safari- ում դուք պետք է միացնեք մշակողի գործիքները, աջ կողմում կտտացրեք ձեր էջին և ընտրեք բովանդակության ստուգում: Դա ձեզ ցույց կտա կապված տարրը և CSS- ը:

Safari- ն ունի գեղեցիկ փոքրիկ տարբերակ `ձեր էջի տպագիր տարբերակը վեբ տեսչում ցուցադրելու համար.

Safari - Տպել տեսք վեբ տեսուչում

Ինչպե՞ս դարձնել ձեր WordPress բլոգի տպիչը `

Տպման համար ձեր ոճավորումը ճշգրտելու մի քանի տարբեր եղանակ կա: Մեկը պարզապես ձեր ընթացիկ ոճաթերթում ավելացնել բաժին, որը բնորոշ է «տպման» մեդիայի տեսակին:

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

Մյուս ձևը ձեր երեխայի թեմային հատուկ ոճաթերթիկ ավելացնելն է, որը սահմանում է տպման ընտրանքները: Ահա թե ինչպես.

  1. Վերբեռնեք ոճերի լրացուցիչ թերթ ձեր կոչվող թեման գրացուցակում տպել. 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 տպել. css ֆայլն այսպիսի տեսք ունի: Ուշադրություն դարձրեք, որ ես նաև ավելացրեցի լուսանցքներ, մեթոդ, որն ընդունված է ժամանակակից զննարկիչների կողմից.

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

Ինչ տեսք ունի տպագիր տեսքը

Ահա, թե ինչպես է տպվում իմ տպագիր տեսքը, եթե տպված է Google Chrome- ից.

WordPress տպագիր դիտում

Տպման առաջադեմ ոճավորում

Կարևոր է նշել, որ ոչ բոլոր զննարկիչները ստեղծվում են հավասար: Կարող եք փորձարկել յուրաքանչյուր դիտարկիչ ՝ տեսնելու, թե ինչպես է ձեր էջը նայում դրանց միջով: Ոմանք նույնիսկ աջակցում են էջի առաջադեմ որոշ գործառույթներ ՝ բովանդակություն ավելացնելու, սահմանները սահմանելու և էջի չափերը, ինչպես նաև մի շարք այլ տարրեր: Smashing Magazine- ն ունի շատ մանրամասն հոդված այս խորացված տպագրության վերաբերյալ տարբերակները.

Ահա էջի դասավորության որոշ մանրամասներ, որոնք ես ներառել եմ ներքևի ձախ մասում հեղինակային իրավունքի պաշտպանության մասին հիշատակ ավելացնելու համար, ներքևի աջ կողմում ՝ էջի հաշվիչ և յուրաքանչյուր էջի վերևի ձախ մասում փաստաթղթի վերնագիր:

@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 Comments

  1. 1
  2. 2

Այս կայքը օգտագործում է Akismet- ը սպամի նվազեցման համար: Իմացեք, թե ինչպես է ձեր տվյալները մշակվում.