Zure WordPress bloga inprimatzeko modukoa al da?

Inprimatu CSS

Atzoko mezua osatu nuen moduan Sare sozialen ROI, Horren aurrebista bidali nahi nion Dotster zuzendari nagusiari Clint Page-ri. PDF batean inprimatu nuenean, ordea, orria nahasia zen!

Oraindik jende asko dago webgune baten kopiak inprimatzea partekatu, geroago erreferentzia egin edo ohar batzuekin fitxategiak ateratzea gustatzen zaiona. Nire bloga inprimatzeko bertsioa egin nahi nuela erabaki nuen. Uste nuena baino askoz errazagoa zen.

Nola erakutsi zure bertsio inprimatua:

Hori lortzeko CSSren oinarriak ulertu beharko dituzu. Zailena zure arakatzailearen garatzaileen kontsola erabiltzea da edukia bistaratu, ezkutatu eta doitzeko probatzeko zure CSS idatzi ahal izateko. Safarian, garatzaile tresnak gaitu beharko dituzu, egin klik eskuineko botoiaz zure orrian eta hautatu Ikuskatu edukia. Horrek lotutako elementua eta CSS erakutsiko dizkizu.

Safariak aukera txiki polita du zure orriaren inprimatutako bertsioa web ikuskatzailean bistaratzeko:

Safari - Inprimatzeko ikuspegia Web Inspector-en

Nola egin zure bloga inprimatzeko bertsioa:

Inprimatzeko estiloa zehazteko pare bat modu daude. Bata da zure uneko estilo orrian "inprimatu" euskarri motari dagokion atal bat gehitzea.

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

Beste modua inprimatzeko aukerak zehazten dituen haurraren gaiari estilo orri zehatz bat gehitzea da. Hona hemen nola:

  1. Kargatu estilo orri gehigarria izeneko zure gaiaren direktorioan inprimatu.css.
  2. Gehitu erreferentzia estilo orri berrian zure functions.php fitxategia. Zure print.css fitxategia guraso eta seme-alaben estilo-orriaren ondoren kargatzen dela ziurtatu nahi duzu, estiloak azken kargatu daitezen. 100eko lehentasuna ere jarri diot karga honi pluginaren ondoren kargatu dadin Hona hemen nire erreferentzia nolakoa den:

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

Orain print.css fitxategia pertsonaliza dezakezu eta ezkutatuta edo bistaratuta nahi dituzun elementu guztiak aldatu ditzakezu. Nire gunean, adibidez, nabigazio, goiburu, alboko barra eta orri guztiak ezkutatzen ditut, erakutsi nahi dudan edukia soilik inprimatu dadin.

My inprimatu.css fitxategiak itxura hau du. Jakin ezazu marjinak ere gehitu ditudala, arakatzaile modernoek onartzen duten metodoa:

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

Inprimatzeko ikuspegia nolakoa den

Hona hemen nire itxura inprimatzeko itxura Google Chrome-tik inprimatuta badago:

WordPress Inprimatzeko ikuspegia

Inprimatzeko estilo aurreratua

Garrantzitsua da nabigatzaile guztiak ez direla berdinak ohartzea. Baliteke arakatzaile bakoitza probatzea zure orrialdeak nolakoa den ikusteko. Batzuek orrialde-funtzio aurreratu batzuk onartzen dituzte edukia gehitzeko, marjinak eta orrialde-tamainak ezartzeko, baita beste hainbat elementu ere. Smashing aldizkariak oso inprimatze aurreratu horiei buruzko artikulu zehatza aukerak.

Hona hemen orrialdearen diseinuaren xehetasunak, behean ezkerrean copyright-aipamen bat gehitzeko, orrialde-kontagailua behean eskuinean eta orrialde bakoitzaren goiko ezkerreko dokumentuaren izenburua gehitzeko:

@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

Zer deritzozu?

Gune honek Akismet-ek spam erabiltzen du. Ikasi zure iruzkina nola prozesatu den.