თქვენი WordPress ბლოგი შეესაბამება პრინტერს?

ბეჭდვა CSS

როგორც ვასრულებდი გუშინდელ პოსტს სოციალური მედიის ROI, მსურდა ამის გადახედვა Dotster- ის გენერალურ დირექტორს კლინტ პეიჯს გავუგზავნე. როდესაც PDF- ზე დავბეჭდე, გვერდი არეული იყო!

იქ ჯერ კიდევ ბევრი ადამიანია, ვისაც სურს დაბეჭდოს ვებგვერდის ასლები, რომ გააზიაროს, მოგვიანებით მიმართოს ან უბრალოდ შეიტანოს შენიშვნები. მე გადავწყვიტე, რომ მსურდა ჩემი ბლოგი პრინტერული მეკეთებინა. ეს ბევრად უფრო იოლი იყო, ვიდრე მეგონა.

როგორ გამოვავლინოთ თქვენი ბეჭდური ვერსია:

ამის მისაღწევად უნდა გესმოდეთ CSS– ის საფუძვლები. ურთულესი ნაწილია თქვენი ბრაუზერის დეველოპერული კონსოლის გამოყენება შინაარსის ჩვენების, დამალვისა და კორექტირებისთვის, რათა თქვენი 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. ატვირთეთ დამატებითი სტილის ფურცელი თქვენს თემების დირექტორიაში, სახელწოდებით ბეჭდვა. css.
  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 ბეჭდვა. css ფაილი ასე გამოიყურება. გაითვალისწინეთ, რომ მე ასევე დავამატე მინდვრები, მეთოდი, რომელიც თანამედროვე ბრაუზერებმა მიიღეს:

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

როგორ გამოიყურება ბეჭდვითი ხედი

აი, როგორ გამოიყურება ჩემი ბეჭდვითი ხედი Google Chrome- იდან დაბეჭდილი:

WordPress ბეჭდვის ხედი

ბეჭდვის Advanced სტილი

მნიშვნელოვანია აღინიშნოს, რომ ყველა ბრაუზერი არ არის შექმნილი თანაბრად. შეიძლება დაგჭირდეთ თითოეული ბრაუზერის შემოწმება, თუ როგორ გამოიყურება თქვენი გვერდი მათ მასშტაბით. ზოგი მხარს უჭერს გვერდის მოწინავე მახასიათებლებს, რომ დაამატოს შინაარსი, დაადგინოს მინდვრები და გვერდების ზომები, ისევე როგორც მთელი რიგი სხვა ელემენტები. Smashing Magazine აქვს ძალიან დეტალური სტატია ამ მოწინავე ბეჭდვის შესახებ პარამეტრები.

აქ მოცემულია გვერდის განლაგების რამდენიმე დეტალი, რომელიც ჩავრთე საავტორო უფლებების შესახებ ნახსენები ქვედა მარცხენა მხარეს, გვერდის მრიცხველის ქვედა მარჯვენა მხარეს და ყველა გვერდის ზედა მარცხენა მხარეს დოკუმენტის სათაურის დასამატებლად:

@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- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.