Ar jūsų „WordPress“ tinklaraštis yra tinkamas spausdinti?

Spausdinti CSS

Kai baigiau vakarykštį įrašą Socialinių tinklų IG, Norėjau išsiųsti jo peržiūrą „Dotster“ generaliniam direktoriui Clintui Pageui. Tačiau kai spausdinau į PDF, puslapis buvo netvarkingas!

Vis dar yra daugybė žmonių, kurie mėgsta atsispausdinti svetainės kopijas, kad vėliau būtų galima jomis dalytis, vėliau jas pateikti ar tiesiog pateikti kai kurias pastabas. Nusprendžiau, kad norėčiau padaryti savo tinklaraštį spausdintuvu. Tai buvo daug lengviau, nei maniau, kad bus.

Kaip parodyti spausdintą versiją:

Norėdami tai pasiekti, turėsite suprasti CSS pagrindus. Sunkiausia naudoti naršyklės kūrėjo pultą, kad būtų galima išbandyti turinio rodymą, slėpimą ir koregavimą, kad galėtumėte parašyti savo CSS. „Safari“ turėsite įgalinti kūrėjo įrankius, dešiniuoju pelės mygtuku spustelėkite savo puslapį ir pasirinkite Tikrinti turinį. Tai parodys susietą elementą ir CSS.

„Safari“ turi malonią parinktį, kad žiniatinklio inspektoriuje būtų rodoma spausdinta jūsų puslapio versija:

„Safari“ - „Web Inspector“ spausdinimo vaizdas

Kaip padaryti, kad „WordPress“ tinklaraštis būtų patogus spausdinti:

Yra keli skirtingi būdai, kaip nurodyti spausdinimo stilių. Vienas iš jų yra tik pridėti dabartiniame stiliaus lape skyrių, skirtą laikmenos tipui „spausdinti“.

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

Kitas būdas - prie vaiko temos pridėti konkretų stiliaus lapą, kuriame nurodomos spausdinimo parinktys. Štai kaip:

  1. Į temų katalogą, vadinamą, įkelkite papildomą stiliaus lapą spausdinti.css.
  2. Pridėkite nuorodą į naują stiliaus lapą functions.php failą. Įsitikinkite, kad failas print.css bus įkeltas po tėvų ir vaikų stiliaus lapo, kad jo stiliai būtų įkeliami paskutiniai. Taip pat šiam įkrovimui skyriau 100 prioritetą, kad jis būtų įkeltas po įskiepio. Štai kaip atrodo mano nuoroda:

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);

Dabar galite pritaikyti „print.css“ failą ir modifikuoti visus norimus paslėpti arba skirtingai rodomus elementus. Pavyzdžiui, savo svetainėje paslepiu visas naršymo, antraštes, šonines juostas ir poraštes, kad būtų atspausdintas tik turinys, kurį noriu rodyti.

My spausdinti.css failas atrodo taip. Atkreipkite dėmesį, kad aš taip pat pridėjau paraštes - metodą, kurį priima šiuolaikinės naršyklės:

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

Kaip atrodo spausdinimo vaizdas

Štai kaip mano spausdinimo vaizdas atrodo spausdinant iš „Google Chrome“:

„WordPress“ spausdinimo rodinys

Išplėstinis spausdinimo stilius

Svarbu pažymėti, kad ne visos naršyklės sukurtos vienodai. Galite išbandyti kiekvieną naršyklę, kad sužinotumėte, kaip jūsų puslapis atrodo jose. Kai kurie netgi palaiko kai kurias išplėstines puslapio funkcijas, kad būtų galima pridėti turinį, nustatyti paraštes ir puslapių dydžius, taip pat daugybę kitų elementų. Žurnalas „Smashing“ turi labai išsamus straipsnis apie šį išplėstinį spausdinimą variantų.

Štai keletas puslapių išdėstymo detalių, kurias įdėjau, kad pridėčiau autorių teisių paminėjimą apatiniame kairiajame kampe, puslapio skaitiklį apačioje dešinėje ir dokumento pavadinimą kiekvieno puslapio viršuje kairėje:

@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) " Highbridge, 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 komentarai

  1. 1
  2. 2

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.