Mahafinaritra ve ny mpanonta bilaogy WordPress anao?

Manonta CSS

Rehefa nahavita ny lahatsoratra omaly aho tamin'ny Media sosialy ROI, Te handefa topi-maso izany any amin'ny Dotster CEO Clint Page aho. Rehefa nanao pirinty tamin'ny PDF anefa aho, dia korontana ilay pejy!

Mbola betsaka ny olona any izay maniry ny manonta kopian'ny tranokala hizarana, hanovozan-kevitra any aoriana, na hametraka rakitra fotsiny. Nanapa-kevitra aho fa te-hanao ny mpanonta bilaogy tiako. Mora lavitra noho ny nieritreretako azy io.

Ahoana ny fomba hanehoana ny kinanao pirinty:

Mila mahatakatra ny fototry ny CSS ianao hanatanterahana izany. Ny ampahany sarotra indrindra dia ny fampiasana ny console an'ny developer browser-nao hanandramana ny fampisehoana, ny fanafenana ary ny fanitsiana ny atiny hahafahanao manoratra CSS. Ao amin'ny Safari, mila mamela ny fitaovana fampivoarana ianao, tsindrio havanana ny pejinao ary safidio ny atiny Diniho. Haneho anao ny singa sy ny CSS mifandraika amin'izany.

Safari dia manana safidy kely tsara hanehoana ny kinova fanontana ny pejinao ao amin'ny mpanara-maso tranonkala:

Safari - Pirinty natao pirinty amin'ny mpanara-maso tranonkala

Ahoana ny fomba hanaovana namana ny bilaoginao WordPress:

Misy fomba roa samy hafa mamaritra ny fanaingoanao amin'ny pirinty. Ny iray dia manampy fotsiny ny fizarana ao amin'ny takelaka misy anao ankehitriny izay manokana amin'ny karazana haino aman-jery "print".

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

Ny fomba hafa dia ny manampy takela-kazo voafaritra manokana amin'ny lohahevitry ny zanakao izay mamaritra ny safidin'ny pirinty. Ity no fomba:

  1. Ampidiro takelaka fanampiny ho an'ny lahatahiry lohahevitra nantsoinao print.css.
  2. Manampia andinin-tsoratra ho an'ny takelaka vaovao ao amin'ny functions.php fisie Ianao dia te-hahazo antoka fa ny rakitra print.css dia entina aorian'ny fomban'ny ray aman-dreninao sy ny zanakao ka ny fomban'izy ireo no mitondra farany. Izaho koa dia nametraka laharam-pahamehana 100 tamin'ity famoahana ity mba hamoahana aorian'ny plugin Ity no toa ny referansa:

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

Azonao atao izao ny manamboatra ny rakitra print.css ary manova ny singa rehetra tianao hafenina na aseho amin'ny fomba hafa. Ao amin'ny tranokalako, ohatra, dia afeniko ny fitetezana rehetra, ny lohateny, ny sidebars, ary ny footer ka ny atiny tiako aseho ihany no voatonta.

My print.css toa izao ny fisie. Jereo fa nanisy margère koa aho, fomba iray eken'ny mpizaha maoderina:

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

Ahoana ny fisehon'ny fijerin'ny pirinty

Toy izao no fahitako ny fijeriko an-tsoratra raha vita pirinty avy amin'i Google Chrome:

WordPress Print View

Fitaovana pirinty avo lenta

Zava-dehibe ny manamarika fa tsy ny mpitsidika rehetra dia foronina mitovy. Azonao atao ny manandrana ny mpizaha tsirairay mba hahitana ny fahitana ny pejinao. Ny sasany aza manohana ny sasany fanasongadinana pejy mandroso hanisy atiny, hametahana sisiny ary haben'ny pejy, ary koa singa hafa. Smashing Magazine dia manana lahatsoratra amin'ny antsipiriany momba ireo pirinty avo lenta ireo safidy.

Ireto misy antsipiriany momba ny firindrana pejy natsangako mba hanisy fanamarihana momba ny zon'ny mpamorona eo ankavanan'ny farany, ny takelaka pejy eo ankavanan'ny farany, ary ny lohatenin'ny antontan-taratasy eo ankavanan'ny havanan'ny pejy rehetra:

@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

Inona ny hevitrao?

Mampiasa Akismet ity tranonkala ity mba hampihenana spam. Fantaro ny fomba amoahanao ny angona fanehoanao.