Content Marketing

Vai jūsu WordPress emuārs ir piemērots printeriem?

Kad es pabeidzu vakardienas ierakstu Sociālo mediju IA, Es gribēju nosūtīt tā priekšskatījumu Dotster izpilddirektoram Klintam Peidžam. Tomēr, kad es drukāju uz PDF, lapa bija haoss!

Tur joprojām ir daudz ļaužu, kuriem patīk izdrukāt vietnes kopijas, lai koplietotu, vēlāk uzzinātu vai vienkārši pievienotu piezīmes. Es nolēmu, ka vēlos padarīt savu emuāru par draudzīgu printeriem. Tas bija daudz vieglāk, nekā es domāju.

Kā parādīt drukāto versiju:

Lai to paveiktu, jums būs jāsaprot CSS pamati. Visgrūtākais ir izmantot pārlūkprogrammas izstrādātāja konsoli, lai pārbaudītu satura parādīšanu, paslēpšanu un pielāgošanu, lai jūs varētu rakstīt savu CSS. Pārlūkprogrammā Safari jums jāiespējo izstrādātāja rīki, ar peles labo pogu noklikšķiniet uz savas lapas un atlasiet Pārbaudīt saturu. Tas parādīs saistīto elementu un CSS.

Safari ir jauka maza iespēja parādīt savas lapas drukāto versiju tīmekļa inspektorā:

Safari - drukas skats Web Inspector

Kā padarīt savu WordPress emuāru draudzīgu drukāšanai:

Ir pāris dažādi veidi, kā norādīt stilu drukāšanai. Viens no tiem ir tikai pievienot sadaļu pašreizējā stila lapā, kas raksturīga multivides tipam “drukāt”.

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

Otrs veids ir bērna tēmai pievienot īpašu stila lapu, kurā norādītas drukas opcijas. Lūk, kā:

  1. Augšupielādējiet papildu stila lapu tēmas direktorijā ar nosaukumu print.css.
  2. Pievienojiet atsauci uz jauno stila lapu savā functions.php failu. Pārliecinieties, ka fails print.css tiek ielādēts pēc vecāku un bērnu stila lapas, lai tā stili tiktu ielādēti pēdējie. Es arī ielādēju prioritāti 100 šai ielādei, lai tā tiktu ielādēta pēc spraudņa. Lūk, kā izskatās mana atsauce:
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);

Tagad jūs varat pielāgot print.css failu un modificēt visus elementus, kurus vēlaties slēpt vai attēlot atšķirīgi. Piemēram, savā vietnē es paslēpju visu navigāciju, galvenes, sānjoslas un kājenes, lai tiktu izdrukāts tikai saturs, kuru vēlos parādīt.

My print.css fails izskatās šādi. Ievērojiet, ka es pievienoju arī piemales, metodi, kuru pieņem mūsdienu pārlūkprogrammas:

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

Kā izskatās drukas skats

Lūk, kā drukas skats izskatās, ja tas tiek drukāts no Google Chrome:

WordPress drukas skats

Uzlabots drukas stils

Ir svarīgi atzīmēt, ka ne visas pārlūkprogrammas ir izveidotas vienādi. Iespējams, vēlēsities pārbaudīt katru pārlūkprogrammu, lai redzētu, kā jūsu lapa tajās izskatās. Daži pat atbalsta dažas uzlabotas lapu funkcijas, lai pievienotu saturu, iestatītu piemales un lapu izmērus, kā arī vairākus citus elementus. Smashing Magazine ir ļoti detalizēts raksts par šo uzlaboto druku iespējas.

Tālāk ir sniegta informācija par lapas izkārtojumu, ko es iekļāvu, lai pievienotu autortiesību pieminēšanu kreisajā apakšējā kreisajā pusē, lapu skaitītāju apakšējā labajā stūrī un dokumenta nosaukumu katras lapas augšējā kreisajā stūrī:

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

Douglas Karr

Douglas Karr ir TKO no OpenINSIGHTS un dibinātājs Martech Zone. Duglass ir palīdzējis desmitiem veiksmīgu MarTech jaunuzņēmumu, ir palīdzējis veikt vairāk nekā 5 miljardu dolāru Martech iegādes un ieguldījumu uzticamības pārbaudi, kā arī turpina palīdzēt uzņēmumiem ieviest un automatizēt to pārdošanas un mārketinga stratēģijas. Douglas ir starptautiski atzīts digitālās transformācijas un MarTech eksperts un runātājs. Duglass ir arī publicēts Dummie rokasgrāmatas un biznesa vadības grāmatas autors.

Saistītie raksti

Atpakaļ uz augšu pogu
aizvērt

Reklāmu bloķēšana konstatēta

Martech Zone var nodrošināt jums šo saturu bez maksas, jo mēs gūstam peļņu no savas vietnes, izmantojot ieņēmumus no reklāmām, saistīto uzņēmumu saites un sponsorēšanu. Būsim pateicīgi, ja, apskatot mūsu vietni, noņemtu savu reklāmu bloķētāju.