Shin Rubutun Rubutun ku na WordPress shine Abokin-Aboki?

Buga CSS

Kamar yadda na kammala rubutun jiya akan Social Media ROI, Ina so in aika samfoti game da shi ga Dotster Shugaba Clint Page. Lokacin da na buga zuwa PDF, duk da haka, shafin ya kasance mara kyau!

Har yanzu akwai mutane da yawa a can waɗanda suke son buga kwafin gidan yanar gizo don rabawa, bayani daga baya, ko kawai yin fayil tare da wasu bayanan kula. Na yanke shawarar ina son yin kwatankwacin bugata ta yanar gizo. Ya kasance da sauƙi fiye da yadda nake tsammani zai kasance.

Yadda Ake Nuna Sigar Fitar Da Ku:

Kuna buƙatar fahimtar abubuwan yau da kullun na CSS don cim ma wannan. Mafi mawuyacin sashi shine amfani da na'ura mai ƙira na burauza don gwada nunin, ɓoyewa, da daidaita abubuwan don ku iya rubuta CSS ɗinku. A Safari, kuna buƙatar kunna kayan aikin haɓaka, danna daman shafinku na dama, kuma zaɓi Duba abun ciki. Wannan zai nuna maka kashi da haɗin CSS.

Safari yana da ɗan zaɓi kaɗan don nuna sigar buga shafin a cikin mai leken yanar gizo:

Safari - Duba Buga a cikin Mai Binciken Yanar gizo

Yadda ake yin Blog ɗinku Mai buga Blog-Aboki:

Akwai wasu hanyoyi daban-daban na tantance salo don bugawa. Isaya shine kawai don ƙara sashi a cikin takaddun tsarinku na yanzu wanda yake takamaiman nau'in nau'in "buga" na kafofin watsa labarai.

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

Wata hanyar ita ce ta ƙara takamaiman takaddun salo ga taken ɗanku wanda ke ƙayyade zaɓuɓɓukan bugawa. Ga yadda:

  1. Loda ƙarin takaddun tsarin salo zuwa taken jigonku wanda ake kira bugu.css.
  2. Aara nuni ga sabon kundin tsarin rubutu a cikin functions.php fayil. Kuna so ku tabbatar da an ɗora fayil ɗinka na print.css bayan iyayenku da takaddun tsarin yara don a sanya kayan salo na ƙarshe. Na kuma sanya fifiko na 100 akan wannan lodin saboda ya ɗora bayan kayan aikin Ga abin da tunanina ya yi kama:

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

Yanzu zaka iya siffanta fayil din print.css ka kuma gyara dukkan abubuwanda kake son ɓoyewa ko nunawa daban. Misali a cikin site dina, na kan boye duk wasu abubuwa da suke zagayawa, taken kai, kwata-kwata, da kuma sawun kafa domin kawai a buga abinda nake son nunawa.

My bugu.css fayil yayi kama da wannan. Lura cewa na kuma kara gefen, hanyar da masu binciken zamani ke karba:

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

Yadda Duba Buga yake Kama

Anan ga yadda bugun gani yake idan aka buga shi daga Google Chrome:

Duba Buga na WordPress

Cigaba da buga Salo

Yana da mahimmanci a lura cewa ba duk masu bincike bane daidai suke ba. Kuna so ku gwada kowane mai binciken don ganin yadda shafinku yake a ƙetaren su. Wasu ma suna goyan bayan wasu ingantattun fasali na shafi don ƙara abun ciki, saita iyaka da girman shafi, da kuma wasu abubuwa. Smashing Magazine yana da matukar cikakken labarin akan waɗannan ci gaba mai ɗorewa zaɓuɓɓuka.

Anan ga wasu bayanan shimfidar shafi wadanda na hada domin kara ambaton hakkin mallaka a kasan hagu, kan shafin shafi a dama daga kasa, da taken takardu a saman hagu na kowane shafi:

@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

Me kuke tunani?

Wannan shafin yana amfani da Akismet don rage spam. Koyi yadda aka sarrafa bayanan bayaninka.