ਇਹ ਹਰ ਕਿਸੇ ਨਾਲ ਵਾਪਰਦਾ ਹੈ।

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

ਸਿਰਫ਼ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ, ਤੁਸੀਂ ਕੁਝ ਨਵਾਂ ਲੱਭਣ ਵਿੱਚ ਕੁਝ ਘੰਟੇ ਨਹੀਂ ਬਿਤਾਉਣਾ ਚਾਹੁੰਦੇ। ਜੇਕਰ ਤੁਹਾਡੀ ਥੀਮ ਵਿੱਚ ਥੋੜਾ ਜਿਹਾ ਮਸਾਲਾ ਜੋੜਨ ਦਾ ਕੋਈ ਤਰੀਕਾ ਸੀ, ਤਾਂ ਇਸ ਨੂੰ ਵੱਖਰਾ ਬਣਾਉਣ ਲਈ ਥੋੜਾ ਜਿਹਾ ਭੜਕਣਾ।

ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਤੁਸੀਂ ਨਿਰਾਸ਼ਾ ਵਿੱਚ ਆਪਣੇ ਹੱਥਾਂ ਨੂੰ ਚੁੱਕੋ, ਆਓ ਮੈਂ ਤੁਹਾਨੂੰ ਆਪਣਾ ਮਸਾਲਾ ਬਣਾਉਣ ਦਾ ਇੱਕ ਆਸਾਨ ਤਰੀਕਾ ਦਿਖਾਵਾਂ। ਥੀਮ ਬਹੁਤ ਜ਼ਿਆਦਾ ਜਤਨਾਂ ਤੋਂ ਬਿਨਾਂ, ਅਤੇ ਬੇਲੋੜੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਜੋ ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਹੌਲੀ ਕਰ ਸਕਦੀਆਂ ਹਨ।

ਡੈਸ਼ੀਕਨਸ ਵਿੱਚ ਦਾਖਲ ਹੋਵੋ। ਡੈਸ਼ੀਕਨ ਫੌਂਟ ਆਈਕਨ ਹਨ ਜੋ ਵਰਡਪਰੈਸ 3.8 ਵਿੱਚ ਪੇਸ਼ ਕੀਤੇ ਗਏ ਸਨ। ਇਹ ਉਹ ਸ਼ਾਨਦਾਰ ਅਤੇ ਸ਼ਾਨਦਾਰ ਆਈਕਨ ਹਨ ਜੋ ਤੁਸੀਂ ਦੇਖਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਲੌਗਇਨ ਕਰਦੇ ਹੋ। ਕੀ ਇਹ ਵਧੀਆ ਨਹੀਂ ਹੋਵੇਗਾ ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੀ ਥੀਮ ਵਿੱਚ ਵੀ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ?

ਠੀਕ ਹੈ, ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਮੈਂ ਤੁਹਾਨੂੰ ਇਹ ਦਿਖਾਉਣ ਜਾ ਰਿਹਾ ਹਾਂ ਕਿ ਕਿਵੇਂ।

ਤੁਸੀਂ ਆਪਣੇ ਵਿੱਚ Dashicons ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ?

ਆਓ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ। ਵਰਡਪਰੈਸ ਵਿੱਚ ਵਰਡਪਰੈਸ 3.8 ਤੋਂ ਡੈਸ਼ੀਕਨ ਪਹਿਲਾਂ ਹੀ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ ਪਰ ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਉਹਨਾਂ ਨੂੰ ਆਪਣੀ ਸਾਈਟ ਦੇ ਅਗਲੇ ਸਿਰੇ 'ਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ; ਯਾਨੀ ਤੁਹਾਡੀ ਥੀਮ।

ਪੜਾਅ 1: ਆਪਣੀ ਥੀਮ Dashicons ਨੂੰ ਤਿਆਰ ਕਰੋ

ਆਪਣੇ ਥੀਮ Dashicons ਨੂੰ ਤਿਆਰ ਕਰਨ ਲਈ ਪਹਿਲਾਂ ਆਪਣੀ functions.php ਫਾਈਲ ਖੋਲ੍ਹੋ (ਦਿੱਖ> ਵਿੱਚ ਮਿਲਦੀ ਹੈ) ;ਸੰਪਾਦਕ - ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹ ਤੁਹਾਡੀ ਮੌਜੂਦਾ ਥੀਮ ਦੀ CSS ਫਾਈਲ ਨੂੰ ਖੋਲ੍ਹ ਦੇਵੇਗਾ। ਅੱਗੇ ਵਧੋ ਅਤੇ ਲੱਭੋfunctions.php ਫਾਈਲ ਅਤੇ ਇਸ ਨੂੰ ਐਡੀਟਰ ਵਿੱਚ ਲੋਡ ਕਰਨ ਲਈ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।)

ਸਟੈਪ 2: ਸਕ੍ਰਿਪਟ ਨੂੰ ਐਨਕਿਊ ਕਰੋ

ਸਭ ਤੋਂ ਹੇਠਾਂ ਤੱਕ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਇਹਨਾਂ ਲਾਈਨਾਂ ਨੂੰ ਪੇਸਟ ਕਰੋ। ਅੰਤ ਵਿੱਚ ਕੋਡ ਦਾ:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

ਠੀਕ ਹੈ! ਹੁਣ ਤੁਹਾਡੀ ਥੀਮ Dashicons ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਤਿਆਰ ਹੈ।

ਕਦਮ 3: ਮੀਨੂ ਆਈਟਮਾਂ ਵਿੱਚ Dashicons ਸ਼ਾਮਲ ਕਰਨਾ

ਆਓ ਤੁਹਾਡੇ ਹੋਮ ਲਿੰਕ ਲਈ ਇੱਕ Dashicon ਸ਼ਾਮਲ ਕਰੀਏ। Dashicons ਵੈੱਬਸਾਈਟ 'ਤੇ ਜਾਓ ਅਤੇ ਆਪਣੀ ਪਸੰਦ ਦਾ ਆਈਕਨ ਚੁਣੋ।

ਅੱਪਡੇਟ: Dashicons ਅਸਲ ਵਿੱਚ GitHub.io 'ਤੇ ਉਪਲਬਧ ਸਨ, ਪਰ ਉਦੋਂ ਤੋਂ ਉਹ WordPress.org 'ਤੇ ਉਪਲਬਧ ਕਰਾਏ ਗਏ ਹਨ।

ਸਟੈਪ 4:

ਇੱਛਤ ਆਈਕਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ (ਇਸ ਕੇਸ ਵਿੱਚ ਮੈਂ ਹੋਮ ਆਈਕਨ ਚੁਣਿਆ ਹੈ) ਅਤੇ ਫਿਰ ਕਾਪੀ HTML 'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਇਹ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਕੋਡ ਦੇ ਨਾਲ ਇੱਕ ਪੌਪ-ਅੱਪ ਵਿੰਡੋ ਦੇਵੇਗਾ।

ਪੜਾਅ 5:

ਆਪਣੇ ਵਰਡਪਰੈਸ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਵਾਪਸ ਜਾਓ, ਦਿੱਖ > 'ਤੇ ਕਲਿੱਕ ਕਰੋ ; ਮੀਨੂ ਅਤੇ ਕੋਡ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਪੇਸਟ ਕਰੋ ਜਿੱਥੇ ਇਹ ਨੈਵੀਗੇਸ਼ਨ ਲੇਬਲ ਕਹਿੰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਅਜੇ ਵੀ ਸ਼ਬਦ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਬੰਦ ਹੋਣ ਵਾਲੀ ਡਿਵ ਬਰੈਕਟ ਤੋਂ ਬਾਅਦ ਟਾਈਪ ਕਰੋ।

'ਤੇ ਕਲਿੱਕ ਕਰੋ। ਆਪਣੇ ਹੋਮ ਪੇਜ ਨੂੰ ਸੇਵ ਅਤੇ ਲੋਡ ਕਰੋ। ਤੁਹਾਡੇ ਹੋਮ ਲਿੰਕ ਨੂੰ ਹੁਣ ਇੱਕ ਵਧੀਆ, ਕਰਿਸਪ ਡੈਸ਼ੀਕਨ ਦਿਖਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

ਤੁਸੀਂ ਇਹ ਸਾਰੀਆਂ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਆਈਟਮਾਂ ਲਈ ਜਾਂ ਸਿਰਫ਼ ਘਰ ਲਈ ਕਰ ਸਕਦੇ ਹੋ। ਸਿਰਫ਼ ਮੇਲ ਖਾਂਦੇ ਆਈਕਨਾਂ ਨਾਲ ਉਪਰੋਕਤ ਕਦਮਾਂ ਨੂੰ ਦੁਹਰਾਓ। ਇਹ ਆਸਾਨ ਸੀ, ਸਹੀ?

ਤੁਸੀਂ ਪੋਸਟ ਮੈਟਾ ਵਿੱਚ ਡੈਸ਼ੀਕਨਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਦੇ ਹੋ?

ਤੁਸੀਂ ਇੱਕ ਕਦਮ ਹੋਰ ਅੱਗੇ ਜਾ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਪੋਸਟ ਮੈਟਾ ਵਿੱਚ ਡੈਸ਼ੀਕਨ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਲੇਖਕ ਦੇ ਸਾਹਮਣੇ ਡੈਸ਼ਿਕੋਨ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ। ਨਾਮ, ਮਿਤੀ, ਸ਼੍ਰੇਣੀ ਜਾਂ ਟੈਗ; ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈਤੁਹਾਡੀ ਥੀਮ ਅਤੇ ਜਾਣਕਾਰੀ ਜੋ ਇਹ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ।

ਕਿਉਂਕਿ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਆਪਣੀ ਥੀਮ ਵਿੱਚ Dashicons ਨੂੰ ਕਤਾਰਬੱਧ ਕੀਤਾ ਹੋਇਆ ਹੈ, ਹੁਣ ਤੁਹਾਨੂੰ ਬਸ ਆਪਣੀ style.css ਫਾਈਲ ਨੂੰ ਖੋਲ੍ਹਣਾ ਹੈ (ਜਾਂ ਕਸਟਮ CSS ਸੰਪਾਦਕ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ ਜੋ ਹਮੇਸ਼ਾ ਇੱਕ ਬਿਹਤਰ ਵਿਕਲਪ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਤੁਹਾਡੇ ਥੀਮ ਦੇ ਅੱਪਡੇਟ ਹੋਣ 'ਤੇ ਤਬਦੀਲੀਆਂ ਨੂੰ ਨਾ ਗੁਆਓ!), ਮੇਲ ਖਾਂਦਾ ਚੋਣਕਾਰ ਲੱਭੋ ਅਤੇ CSS ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ।

ਆਓ ਮੰਨ ਲਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਨਾਮ ਜਾਂ ਆਪਣੇ ਲੇਖਕ ਦੇ ਨਾਮ ਦੇ ਅੱਗੇ ਇੱਕ ਆਈਕਨ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ।

ਕਦਮ 1:

ਪਹਿਲਾਂ ਅਸੀਂ ਇੱਕ ਆਈਕਨ ਚੁਣਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ।

ਕਦਮ 2:

ਫਿਰ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ, ਅਤੇ ਇਸ ਵਾਰ ਕਾਪੀ CSS ਨੂੰ ਚੁਣੋ। ਦੁਬਾਰਾ, ਇਹ ਤੁਹਾਨੂੰ ਪੇਸਟ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਕੋਡ ਦੇ ਨਾਲ ਇੱਕ ਪੌਪ-ਅੱਪ ਵਿੰਡੋ ਦੇਵੇਗਾ।

ਪੜਾਅ 3:

ਹੁਣ ਆਪਣੀ style.css ਖੋਲ੍ਹੋ ਅਤੇ ਸੰਬੰਧਿਤ ਚੋਣਕਾਰ ਨੂੰ ਲੱਭੋ, ਇਸ ਕੇਸ ਵਿੱਚ - .entry-author. ਜੋੜ ਕੇ : ਪਹਿਲਾਂ ਅਤੇ ਫਿਰ ਉਸ CSS ਕੋਡ ਨੂੰ ਪੇਸਟ ਕਰਕੇ ਜੋ ਤੁਸੀਂ Dashicons ਵੈਬਸਾਈਟ ਤੋਂ ਕਾਪੀ ਕੀਤਾ ਹੈ, ਲੇਖਕ ਦੇ ਨਾਮ ਦੇ ਸਾਹਮਣੇ ਇੱਕ ਵਧੀਆ ਆਈਕਨ ਹੋਵੇਗਾ। ਤੁਹਾਨੂੰ ਇਹ ਵੀ ਦੱਸਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਤੁਸੀਂ Dashicons ਫੌਂਟ ਵਰਤ ਰਹੇ ਹੋ। ਸੰਸ਼ੋਧਿਤ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

ਆਓ ਥੋੜਾ ਜਿਹਾ ਸਟਾਈਲਿੰਗ ਵੀ ਜੋੜੀਏ, ਅਤੇ ਹੁਣ ਪੂਰਾ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

ਅੰਤ ਨਤੀਜਾ

ਤਾਂ ਕੀ ਕੀ ਇਹ ਅੰਤ ਵਿੱਚ ਅਜਿਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ?

ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਤਰੀਕੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨਾਲ ਤੁਸੀਂ Dashicons ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ – ਆਪਣੀ ਰਚਨਾਤਮਕਤਾ ਨੂੰ ਫੜਨ ਦਿਓ ਅਤੇ ਦੇਖੋ ਕਿ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ।

ਇਸ ਸਭ ਨੂੰ ਇਕੱਠੇ ਰੱਖਣਾ

ਉਪਰੋਕਤ ਉਦਾਹਰਨਾਂ ਨੂੰ ਛੱਡ ਕੇ, ਤੁਸੀਂ ਆਪਣੇ ਬੈਕਐਂਡ ਵਿੱਚ ਡੈਸ਼ੀਕਨ ਦੀ ਵਰਤੋਂ ਵੱਖ-ਵੱਖ ਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹੋਵੱਖ-ਵੱਖ ਪੋਸਟ ਕਿਸਮਾਂ ਲਈ ਆਈਕਨ, ਜਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਪੋਸਟ ਸਿਰਲੇਖਾਂ, ਵਿਜੇਟ ਸਿਰਲੇਖਾਂ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਾਂ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ ਲੈਂਡਿੰਗ ਪੰਨਾ ਬਣਾ ਰਹੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਆਪਣੀ ਸਾਈਟ ਦੇ ਵੱਖ-ਵੱਖ ਪੰਨਿਆਂ ਵਿੱਚ ਫਰਕ ਕਰ ਸਕਦੇ ਹੋ।

ਇਸਦੀ ਇੱਕ ਬੁਨਿਆਦੀ ਉਦਾਹਰਨ ਇਹ ਹੈ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ: