Таны WordPress блог хэвлэгчдэд ээлтэй юу?

CSS хэвлэх

Өчигдрийн бичлэгийг дуусгах үед Олон нийтийн мэдээллийн хэрэгслийн ROI, Би үүнийг урьдчилж харахыг Dotster-ийн гүйцэтгэх захирал Клинт Пэйж рүү илгээхийг хүссэн юм. Намайг PDF дээр хэвлэхэд хуудас нь эмх замбараагүй байсан!

Вэбсайтынхаа хуулбарыг бусадтай хуваалцах, дараа нь лавлах, эсвэл зүгээр л тэмдэглэл хөтлөөд хэвлэх дуртай олон хүмүүс байсаар байна. Би блогоо хэвлэгчдэд ээлтэй болгохыг хүссэн юм. Энэ нь миний бодож байснаас хамаагүй хялбар байсан.

Хэвлэсэн хувилбараа хэрхэн яаж харуулах вэ:

Үүнийг хэрэгжүүлэхийн тулд та CSS-ийн үндсийг ойлгох хэрэгтэй. Хамгийн хэцүү зүйл бол вэб хөтчийнхөө хөгжүүлэгчийн консол ашиглан контентыг харуулах, нуух, тохируулах ажлыг туршиж үзэх явдал юм. Safari дээр та хөгжүүлэгчийн хэрэгслийг идэвхжүүлж, хуудасныхаа баруун товч дээр дарж, Агуулгыг шалгах сонголтыг сонгоно уу. Энэ нь танд холбогдох элемент болон CSS-ийг харуулах болно.

Safari-д вэб хуудасныхаа хэвлэмэл хувилбарыг вэб хянагч дээр харуулах сайхан сонголт байна.

Safari - Вэб хянагч дээр хэвлэх харах

WordPress блогоо хэрхэн хэвлэгчдэд ээлтэй болгох вэ?

Хэвлэх хэв маягаа тодорхойлох хоёр өөр арга байдаг. Үүний нэг нь одоогийн хэв маягийн хуудсанд "хэвлэх" медиа төрөлд хамааралтай хэсгийг нэмэх явдал юм.

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

Нөгөө арга бол хэвлэх сонголтуудыг тодорхойлсон тодорхой хэв маягийн хуудсыг хүүхдийнхээ сэдэвт нэмэх явдал юм. Үүнд:

  1. Нэмэгдсэн загварын хуудсыг сэдэвчилсэн директор дээрээ байршуулна уу хэвлэх.
  2. Өөрийнхөө шинэ загварын хүснэгтэд лавлагаа нэмж оруулаарай functions.php файл. Эцэг эх, үр хүүхдийнхээ хүснэгтийн дараа таны print.css файлыг ачаалахыг баталгаажуулахыг хүсэх бөгөөд ингэснээр загварыг хамгийн сүүлд ачаалах болно. Би мөн энэ ачаалал дээр 100-ийн тэргүүлэх чиглэлийг тавьсан бөгөөд ингэснээр залгаасны дараа ачаалагдах болно. Миний лавлагаа ийм байна:

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

Одоо та print.css файлыг өөрчилж, нуух эсвэл өөрөөр харуулахыг хүссэн бүх элементээ өөрчлөх боломжтой. Жишээлбэл, миний сайт дээр би бүх навигаци, толгой, хажуугийн самбар, хөлийг нуудаг бөгөөд ингэснээр зөвхөн миний үзүүлэхийг хүссэн агуулга хэвлэгдэх болно.

My хэвлэх файл ийм байна. Орчин үеийн хөтөчдийн хүлээн зөвшөөрсөн аргыг би бас нэмсэн болохыг анхаарна уу.

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

Хэвлэх харагдац хэрхэн харагдаж байна

Google Chrome-оос хэвлэсэн тохиолдолд миний хэвлэх харагдац хэрхэн харагдахыг энд харуулав.

WordPress хэвлэх харах

Нарийвчилсан хэвлэх загвар

Бүх хөтөч ижил тэгш биш байдаг гэдгийг тэмдэглэх нь зүйтэй. Таны хуудсыг хэрхэн харж байгааг харахын тулд та хөтөч бүрийг туршиж үзэхийг хүсч магадгүй юм. Зарим нь агуулга нэмэх, захын хэмжээ, хуудасны хэмжээг тохируулах, мөн бусад хэд хэдэн элементүүдийг сайжруулахын тулд хуудасны зарим дэвшилтэт функцийг дэмждэг. Smashing сэтгүүлд маш их зүйл байдаг эдгээр дэвшилтэт хэвлэх талаар дэлгэрэнгүй нийтлэл сонголтууд.

Зүүн доод хэсэгт зохиогчийн эрхийн тухай тэмдэглэл, баруун доод талд хуудасны тоолуур, хуудас бүрийн зүүн дээд талд баримт бичгийн гарчгийг нэмж оруулахын тулд миний оруулсан хуудасны байршлын талаархи дэлгэрэнгүй мэдээллийг энд оруулав.

@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 санал

  1. 1

    Сонирхолтой Дуглас, би чиний бичлэгийг уншаад зүгээр л PrintFriendly нэртэй сайтыг үзэж байсан. Энэ нь танд болон бусад хэвлэхийг хүсч буй сайтуудад зориулагдсан болно. Хөөрхөн, сонирхож үзээрэй.

    http://www.printfriendly.com

  2. 2

Чи юу гэж бодож байна?

Энэ сайт нь спамыг багасгахын тулд Akismet-ийг ашигладаг. Таны өгөгдлийг хэрхэн боловсруулдаг талаар суралц.