உங்கள் வேர்ட்பிரஸ் வலைப்பதிவு அச்சுப்பொறி நட்பானதா?

CSS ஐ அச்சிடுக

நேற்றைய இடுகையை நான் முடித்தவுடன் சமூக மீடியா ROI, அதன் முன்னோட்டத்தை டாட்ஸ்டர் தலைமை நிர்வாக அதிகாரி கிளின்ட் பக்கத்திற்கு அனுப்ப விரும்பினேன். நான் ஒரு PDF க்கு அச்சிட்டபோது, ​​பக்கம் ஒரு குழப்பமாக இருந்தது!

ஒரு வலைத்தளத்தின் நகல்களைப் பகிர, பின்னர் குறிப்பிட, அல்லது சில குறிப்புகளுடன் தாக்கல் செய்ய விரும்பும் பலர் இன்னும் அங்கே இருக்கிறார்கள். எனது வலைப்பதிவு அச்சுப்பொறியை நட்பாக மாற்ற விரும்புகிறேன் என்று முடிவு செய்தேன். நான் நினைத்ததை விட இது மிகவும் எளிதாக இருந்தது.

உங்கள் அச்சு பதிப்பைக் காண்பிப்பது எப்படி:

இதை நிறைவேற்ற CSS இன் அடிப்படைகளை நீங்கள் புரிந்து கொள்ள வேண்டும். உள்ளடக்கத்தை காண்பித்தல், மறைத்தல் மற்றும் சரிசெய்தல் ஆகியவற்றைச் சோதிக்க உங்கள் உலாவியின் டெவலப்பர் கன்சோலைப் பயன்படுத்துவது மிகவும் கடினமான பகுதியாகும், இதனால் உங்கள் CSS ஐ எழுத முடியும். சஃபாரி இல், நீங்கள் டெவலப்பர் கருவிகளை இயக்க வேண்டும், உங்கள் பக்கத்தை வலது கிளிக் செய்து உள்ளடக்கத்தை ஆய்வு செய்யவும். இது உறுப்பு மற்றும் தொடர்புடைய CSS ஐக் காண்பிக்கும்.

உங்கள் பக்கத்தின் அச்சு பதிப்பை வலை இன்ஸ்பெக்டரில் காண்பிக்க சஃபாரிக்கு ஒரு நல்ல சிறிய விருப்பம் உள்ளது:

சஃபாரி - வலை இன்ஸ்பெக்டரில் அச்சுக் காட்சி

உங்கள் வேர்ட்பிரஸ் வலைப்பதிவை அச்சுப்பொறி நட்பாக மாற்றுவது எப்படி:

உங்கள் ஸ்டைலிங் அச்சிடுவதற்கு இரண்டு வெவ்வேறு வழிகள் உள்ளன. ஒன்று உங்கள் தற்போதைய நடைதாள் ஒரு பகுதியை “அச்சு” இன் ஊடக வகைக்கு குறிப்பிட்டது.

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

மற்ற வழி, அச்சு விருப்பங்களைக் குறிப்பிடும் உங்கள் குழந்தை கருப்பொருளில் ஒரு குறிப்பிட்ட நடை தாளைச் சேர்ப்பது. இங்கே எப்படி:

  1. எனப்படும் உங்கள் தீம் கோப்பகத்தில் கூடுதல் நடைதாள் பதிவேற்றவும் print.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 print.css கோப்பு இது போல் தெரிகிறது. நவீன உலாவிகளால் ஏற்றுக்கொள்ளப்பட்ட ஒரு முறையான விளிம்புகளையும் சேர்த்துள்ளேன் என்பதைக் கவனியுங்கள்:

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

அச்சுக் காட்சி எப்படி இருக்கிறது

Google Chrome இலிருந்து அச்சிடப்பட்டால் எனது அச்சு பார்வை எப்படி இருக்கும் என்பது இங்கே:

வேர்ட்பிரஸ் அச்சு காட்சி

மேம்பட்ட அச்சு ஸ்டைலிங்

எல்லா உலாவிகளும் சமமாக உருவாக்கப்படவில்லை என்பதை கவனத்தில் கொள்ள வேண்டியது அவசியம். உங்கள் உலாவி எவ்வாறு காணப்படுகிறது என்பதைப் பார்க்க ஒவ்வொரு உலாவியையும் சோதிக்க நீங்கள் விரும்பலாம். சிலர் உள்ளடக்கத்தைச் சேர்க்க, மேம்பட்ட விளிம்புகள் மற்றும் பக்க அளவுகள் மற்றும் பல உறுப்புகளைச் சேர்க்க சில மேம்பட்ட பக்க அம்சங்களையும் ஆதரிக்கின்றனர். ஸ்மாஷிங் இதழ் மிகவும் உள்ளது இந்த மேம்பட்ட அச்சு பற்றிய விரிவான கட்டுரை விருப்பங்கள்.

கீழே இடதுபுறத்தில் பதிப்புரிமை குறிப்பையும், கீழ் வலதுபுறத்தில் ஒரு பக்க கவுண்டரையும், ஒவ்வொரு பக்கத்தின் மேல் இடதுபுறத்தில் ஆவண தலைப்பையும் சேர்க்க நான் இணைத்த சில பக்க தளவமைப்பு விவரங்கள் இங்கே:

@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

    சுவாரஸ்யமான டக்ளஸ், நான் உங்கள் இடுகையைப் படிக்கும்போது பிரிண்ட் பிரண்ட்லி என்ற தளத்தைப் பார்த்துக் கொண்டிருந்தேன். இது உங்களுக்கும் நீங்கள் அச்சிட விரும்பும் வேறு எந்த தளத்திற்கும் நிறைய செய்கிறது. மிகவும் இனிமையானது, பாருங்கள்:

    http://www.printfriendly.com

  2. 2

நீங்கள் என்ன நினைக்கிறீர்கள்?

இந்த தளம் ஸ்பேமைக் குறைக்க Akismet ஐப் பயன்படுத்துகிறது. உங்கள் கருத்துத் தரவு எவ்வாறு செயல்படுத்தப்படுகிறது என்பதை அறியவும்.