ਕੀ ਤੁਹਾਡਾ ਵਰਡਪਰੈਸ ਬਲੌਗ ਪ੍ਰਿੰਟਰ-ਦੋਸਤਾਨਾ ਹੈ?

CSS ਛਾਪੋ

ਜਿਵੇਂ ਕਿ ਮੈਂ ਕੱਲ੍ਹ ਦੀ ਪੋਸਟ ਨੂੰ ਪੂਰਾ ਕੀਤਾ ਸੋਸ਼ਲ ਮੀਡੀਆ ਆਰ.ਓ.ਆਈ., ਮੈਂ ਡੌਸਟਰ ਦੇ ਸੀਈਓ ਕਲਿੰਟ ਪੇਜ ਨੂੰ ਇਸਦਾ ਪੂਰਵ ਦਰਸ਼ਨ ਭੇਜਣਾ ਚਾਹੁੰਦਾ ਸੀ. ਜਦੋਂ ਮੈਂ ਇੱਕ ਪੀਡੀਐਫ ਤੇ ਛਾਪਿਆ, ਹਾਲਾਂਕਿ, ਪੰਨਾ ਇੱਕ ਗੜਬੜ ਸੀ!

ਇੱਥੇ ਅਜੇ ਵੀ ਬਹੁਤ ਸਾਰੇ ਲੋਕ ਅਜੇਹੇ ਹਨ ਜੋ ਕਿਸੇ ਵੈਬਸਾਈਟ ਦੀਆਂ ਕਾਪੀਆਂ ਨੂੰ ਸਾਂਝਾ ਕਰਨਾ, ਬਾਅਦ ਵਿੱਚ ਹਵਾਲਾ ਦੇਣਾ ਜਾਂ ਕੁਝ ਨੋਟਾਂ ਨਾਲ ਫਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ. ਮੈਂ ਫੈਸਲਾ ਕੀਤਾ ਕਿ ਮੈਂ ਆਪਣੇ ਬਲੌਗ ਨੂੰ ਪ੍ਰਿੰਟਰ-ਅਨੁਕੂਲ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਹਾਂ. ਇਹ ਮੇਰੇ ਸੋਚਣ ਨਾਲੋਂ ਕਿਤੇ ਅਸਾਨ ਸੀ.

ਆਪਣਾ ਪ੍ਰਿੰਟ ਸੰਸਕਰਣ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨਾ ਹੈ:

ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ CSS ਦੀਆਂ ਮੁicsਲੀਆਂ ਗੱਲਾਂ ਨੂੰ ਸਮਝਣ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਸਭ ਤੋਂ ਮੁਸ਼ਕਲ ਹਿੱਸਾ ਤੁਹਾਡੇ ਬ੍ਰਾ browserਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਕਨਸੋਲ ਦੀ ਵਰਤੋਂ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨ, ਲੁਕਾਉਣ, ਅਤੇ ਵਿਵਸਥ ਕਰਨ ਲਈ ਕਰ ਰਿਹਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ CSS ਲਿਖ ਸਕੋ. ਸਫਾਰੀ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਵਿਕਾਸਕਾਰ ਟੂਲਸ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ, ਆਪਣੇ ਪੇਜ ਤੇ ਸੱਜਾ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਸਮੱਗਰੀ ਦਾ ਨਿਰੀਖਣ ਕਰੋ ਚੁਣੋ. ਇਹ ਤੁਹਾਨੂੰ ਐਲੀਮੈਂਟ ਅਤੇ ਸੰਬੰਧਿਤ CSS ਦਿਖਾਏਗਾ.

ਵੈਬ ਇੰਸਪੈਕਟਰ ਵਿੱਚ ਤੁਹਾਡੇ ਪੇਜ ਦੇ ਪ੍ਰਿੰਟ ਸੰਸਕਰਣ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸਫਾਰੀ ਕੋਲ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਵਿਕਲਪ ਹੈ:

ਸਫਾਰੀ - ਵੈੱਬ ਇੰਸਪੈਕਟਰ ਵਿੱਚ ਪ੍ਰਿੰਟ ਵਿ View

ਆਪਣੇ ਵਰਡਪਰੈਸ ਬਲੌਗ ਨੂੰ ਪ੍ਰਿੰਟਰ-ਦੋਸਤਾਨਾ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ:

ਪ੍ਰਿੰਟ ਲਈ ਤੁਹਾਡੀ ਸ਼ੈਲੀ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੇ ਕੁਝ ਵੱਖੋ ਵੱਖਰੇ areੰਗ ਹਨ. ਇਕ ਸਿਰਫ ਤੁਹਾਡੀ ਮੌਜੂਦਾ ਸਟਾਈਲਸ਼ੀਟ ਵਿਚ ਇਕ ਹਿੱਸਾ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਜੋ ਮੀਡੀਆ ਪ੍ਰਿੰਟ ਦੇ "ਪ੍ਰਿੰਟ" ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ.

@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 ਫਾਈਲ. ਤੁਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੋਗੇ ਕਿ ਤੁਹਾਡੀ ਪ੍ਰਿੰਟ.ਸੀ.ਐੱਸ. ਫਾਈਲ ਤੁਹਾਡੇ ਮਾਪਿਆਂ ਅਤੇ ਬੱਚੇ ਦੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਤੋਂ ਬਾਅਦ ਲੋਡ ਕੀਤੀ ਗਈ ਹੈ ਤਾਂ ਜੋ ਇਸ ਦੀਆਂ ਸਟਾਈਲਸ ਆਖਰੀ ਵਾਰ ਲੋਡ ਹੋਣ. ਮੈਂ ਇਸ ਲੋਡਿੰਗ 'ਤੇ 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);

ਹੁਣ ਤੁਸੀਂ ਪ੍ਰਿੰਟ.ਸੀ.ਐੱਸ. ਫਾਈਲ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਛੁਪਾਉਣ ਜਾਂ ਵੱਖਰੇ displayedੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ. ਮੇਰੀ ਸਾਈਟ ਵਿਚ, ਉਦਾਹਰਣ ਵਜੋਂ, ਮੈਂ ਸਾਰੇ ਨੇਵੀਗੇਸ਼ਨ, ਸਿਰਲੇਖ, ਸਾਈਡਬਾਰ ਅਤੇ ਫੁੱਟਰ ਲੁਕਾਉਂਦਾ ਹਾਂ ਤਾਂ ਜੋ ਸਿਰਫ ਉਹ ਸਮੱਗਰੀ ਹੀ ਪ੍ਰਦਰਸ਼ਤ ਕੀਤੀ ਜਾਏ ਜੋ ਮੈਂ ਪ੍ਰਦਰਸ਼ਤ ਕਰਨਾ ਚਾਹੁੰਦਾ ਹਾਂ.

My print.css ਫਾਈਲ ਇਸ ਤਰਾਂ ਦਿਸਦੀ ਹੈ. ਧਿਆਨ ਦਿਓ ਕਿ ਮੈਂ ਮਾਰਜਿਨ ਵੀ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ, ਇੱਕ ਅਜਿਹਾ ਵਿਧੀ ਜੋ ਆਧੁਨਿਕ ਬ੍ਰਾsersਜ਼ਰਾਂ ਦੁਆਰਾ ਸਵੀਕਾਰ ਕੀਤੀ ਗਈ ਹੈ:

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

ਪ੍ਰਿੰਟ ਵਿ View ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ

ਗੂਗਲ ਕਰੋਮ ਤੋਂ ਛਾਪੇ ਜਾਣ 'ਤੇ ਇਹ ਮੇਰਾ ਪ੍ਰਿੰਟ ਦ੍ਰਿਸ਼ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ:

ਵਰਡਪਰੈਸ ਪ੍ਰਿੰਟ ਵਿ.

ਐਡਵਾਂਸ ਪ੍ਰਿੰਟ ਸਟਾਈਲਿੰਗ

ਇਹ ਨੋਟ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਸਾਰੇ ਬਰਾsersਜ਼ਰ ਬਰਾਬਰ ਨਹੀਂ ਬਣਾਏ ਜਾਂਦੇ. ਤੁਸੀਂ ਹਰੇਕ ਬ੍ਰਾ .ਜ਼ਰ ਨੂੰ ਇਹ ਵੇਖਣ ਲਈ ਟੈਸਟ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ ਪੇਜ ਉਨ੍ਹਾਂ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ. ਕੁਝ ਸਮੱਗਰੀ ਨੂੰ ਜੋੜਨ, ਮਾਰਜਿਨ ਅਤੇ ਪੇਜ ਦੇ ਆਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੇ ਨਾਲ ਨਾਲ ਬਹੁਤ ਸਾਰੇ ਹੋਰ ਤੱਤ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਕੁਝ ਤਕਨੀਕੀ ਪੇਜ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ. ਸਮੈਸ਼ਿੰਗ ਮੈਗਜ਼ੀਨ ਬਹੁਤ ਹੈ ਇਹ ਐਡਵਾਂਸ ਪ੍ਰਿੰਟ ਤੇ ਵਿਸਤ੍ਰਿਤ ਲੇਖ ਚੋਣਾਂ

ਇੱਥੇ ਕੁਝ ਪੇਜ ਲੇਆਉਟ ਵੇਰਵੇ ਹਨ ਜੋ ਮੈਂ ਹੇਠਾਂ ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਕਾਪੀਰਾਈਟ ਜ਼ਿਕਰ, ਹੇਠਾਂ ਸੱਜੇ ਪਾਸੇ ਇੱਕ ਪੰਨਾ ਕਾ counterਂਟਰ, ਅਤੇ ਹਰ ਪੰਨੇ ਦੇ ਉੱਪਰ ਖੱਬੇ ਪਾਸੇ ਦਸਤਾਵੇਜ਼ ਸਿਰਲੇਖ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ:

@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

    ਦਿਲਚਸਪ ਡਗਲਸ, ਜਦੋਂ ਮੈਂ ਤੁਹਾਡੀ ਪੋਸਟ ਨੂੰ ਪੜ੍ਹਦਾ ਹਾਂ ਤਾਂ ਮੈਂ ਸਿਰਫ ਪਰਿੰਟਫ੍ਰੈਂਡਲੀ ਨਾਮੀ ਸਾਈਟ ਨੂੰ ਵੇਖ ਰਿਹਾ ਸੀ. ਇਹ ਤੁਹਾਡੇ ਲਈ ਅਤੇ ਕੋਈ ਹੋਰ ਸਾਈਟ ਜੋ ਤੁਸੀਂ ਪ੍ਰਿੰਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਲਈ ਬਹੁਤ ਕੁਝ ਕਰਦਾ ਹੈ. ਬਹੁਤ ਪਿਆਰਾ, ਇਸ ਨੂੰ ਚੈੱਕ ਕਰੋ:

    http://www.printfriendly.com

  2. 2

ਤੁਹਾਨੂੰ ਕੀ ਲੱਗਦਾ ਹੈ?

ਇਹ ਸਾਈਟ ਸਪੈਮ ਨੂੰ ਘੱਟ ਕਰਨ ਲਈ ਅਕਕੀਮੈਟ ਵਰਤਦੀ ਹੈ. ਜਾਣੋ ਕਿ ਤੁਹਾਡੇ ਟਿੱਪਣੀ ਡੇਟਾ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਿਵੇਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ.