നിങ്ങളുടെ വേർഡ്പ്രസ്സ് ബ്ലോഗ് പ്രിന്റർ സൗഹൃദമാണോ?

CSS അച്ചടിക്കുക

ഞാൻ ഇന്നലത്തെ പോസ്റ്റ് പൂർത്തിയാക്കിയപ്പോൾ സോഷ്യൽ മീഡിയ ROI, അതിന്റെ പ്രിവ്യൂ ഡോട്ട്സ്റ്റർ സി‌ഇ‌ഒ ക്ലിന്റ് പേജിലേക്ക് അയയ്‌ക്കാൻ ഞാൻ ആഗ്രഹിച്ചു. ഞാൻ ഒരു PDF- ലേക്ക് അച്ചടിച്ചപ്പോൾ, പേജ് ഒരു കുഴപ്പമായിരുന്നു!

ഒരു വെബ്‌സൈറ്റിന്റെ പകർപ്പുകൾ പങ്കിടാനോ പിന്നീട് റഫറൻസ് ചെയ്യാനോ ചില കുറിപ്പുകൾ ഉപയോഗിച്ച് ഫയൽ ചെയ്യാനോ ഇഷ്‌ടപ്പെടുന്ന നിരവധി ആളുകൾ ഇപ്പോഴും അവിടെയുണ്ട്. എന്റെ ബ്ലോഗ് പ്രിന്റർ സ friendly ഹൃദമാക്കണമെന്ന് ഞാൻ തീരുമാനിച്ചു. ഞാൻ വിചാരിച്ചതിലും വളരെ എളുപ്പമായിരുന്നു ഇത്.

നിങ്ങളുടെ അച്ചടി പതിപ്പ് എങ്ങനെ പ്രദർശിപ്പിക്കും:

ഇത് നിറവേറ്റുന്നതിന് നിങ്ങൾ CSS ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസിലാക്കേണ്ടതുണ്ട്. ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിനും മറയ്ക്കുന്നതിനും ക്രമീകരിക്കുന്നതിനും പരീക്ഷിക്കുന്നതിന് നിങ്ങളുടെ ബ്ര browser സറിന്റെ ഡവലപ്പർ കൺസോൾ ഉപയോഗിക്കുന്നതാണ് ഏറ്റവും ബുദ്ധിമുട്ടുള്ള ഭാഗം, അതുവഴി നിങ്ങളുടെ 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 ഫയൽ ഇതുപോലെ തോന്നുന്നു. ആധുനിക ബ്ര rowsers സറുകൾ‌ അംഗീകരിക്കുന്ന ഒരു മാർ‌ഗ്ഗം ഞാൻ‌ മാർ‌ജിനുകളും ചേർ‌ത്തുവെന്നത് ശ്രദ്ധിക്കുക.

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

അച്ചടി കാഴ്ച എങ്ങനെ കാണുന്നു

Google Chrome- ൽ നിന്ന് അച്ചടിച്ചാൽ എന്റെ പ്രിന്റ് കാഴ്ച എങ്ങനെ കാണപ്പെടുമെന്ന് ഇതാ:

വേർഡ്പ്രസ്സ് പ്രിന്റ് കാഴ്ച

നൂതന പ്രിന്റ് സ്റ്റൈലിംഗ്

എല്ലാ ബ്ര rowsers സറുകളും തുല്യമായി സൃഷ്ടിക്കപ്പെടുന്നില്ല എന്നത് ഓർത്തിരിക്കേണ്ടത് പ്രധാനമാണ്. നിങ്ങളുടെ പേജ് അവയിലുടനീളം എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് കാണാൻ ഓരോ ബ്ര browser സറും പരീക്ഷിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. ഉള്ളടക്കം ചേർക്കാനും മാർജിനുകളും പേജ് വലുപ്പങ്ങളും സജ്ജീകരിക്കാനും മറ്റ് നിരവധി ഘടകങ്ങൾ ചേർക്കാനും ചില നൂതന പേജ് സവിശേഷതകളെ പിന്തുണയ്ക്കുന്നു. സ്മാഷിംഗ് മാഗസിൻ വളരെ ഉണ്ട് ഈ നൂതന പ്രിന്റുകളെക്കുറിച്ചുള്ള വിശദമായ ലേഖനം ഓപ്ഷനുകൾ.

ചുവടെ ഇടതുഭാഗത്ത് ഒരു പകർപ്പവകാശ പരാമർശം, ചുവടെ വലതുവശത്ത് ഒരു പേജ് ക counter ണ്ടർ, എല്ലാ പേജിന്റെയും മുകളിൽ ഇടതുവശത്തുള്ള പ്രമാണ ശീർഷകം എന്നിവ ചേർക്കാൻ ഞാൻ സംയോജിപ്പിച്ച ചില പേജ് ലേ layout ട്ട് വിശദാംശങ്ങൾ ഇതാ:

@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 ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ അഭിപ്രായ ഡാറ്റ പ്രോസസ്സുചെയ്യുന്നത് എങ്ങനെയെന്നറിയുക.