ورڈپریس تھیم کے لئے کسٹم ویجٹ ایریا کیسے بنائیں | Widget Area

آج کے اس ٹٹوریل میں بات کرنے والے ہیں کہ ورڈپریس کےتھیم میں کسٹم ہیڈر ویجٹ ایریا کیسے بنائیں؟ اور ویجٹس کو اپنے ویب سائٹ کے ہیڈر میں کیسے لگائیں؟ اور ہمیں اس کی ضرورت کیوں پیش آتی ہے۔

آپ سب سے پہلے ویجٹ کو سمجھیں: ویجٹ ایک بنا بنایا کوڈ ہے جسے ویب سائٹ کے الگ الگ حصوں میں شو کرایا جاتا ہے، مثلاً: ” سرچ بار ” اور اسی طرح سے کلینڈر وغیرہ، اور جس جگہ شو کرایا جاتا ہے اسے ویجٹ ایریا کہتے ہیں۔

مثلاً ویب سائٹ کے ہیڈر میں ہمیں یوزر کے لئے ایک ویجٹ شو کرانا ہے تو ہیڈر سیکشن میں ایک ویجٹ ایریا بنانا پڑے گا تاکہ ہم وہاں ویجٹ رکھ سکیں جو یوزر کو شو ہوسکے۔

ورڈپریس کے بہت سے تھیم میں ہمیں یہ بنا بنایا ملتا ہے اور بہت سے میں ہمیں یہ بنانا پڑتا ہے۔  اگر آپ بھی کسٹم ہیڈر ویجٹ ایریا بنانا چاہتے ہیں تو ہمارے اس ٹٹوریل کو قدم بقدم فالو کریں۔

کسٹم ہیڈر ویجٹ ایریا کیسے بنائیں

کسٹم ہیڈر ویجٹ ایریا دو طرح سے بنا سکتے ہیں۔ ➊ پلگ ان سے ➋ کوڈنگ کی مدد سے۔
پلگ ان کی مدد سے بنانا ذرا آسان ہے بمقابل کوڈنگ کے کچھ لوگ پلگ ان سے بنانا پسند کرتے ہیں اور کچھ لوگ بذریعہ کوڈنگ کے کیونکہ اس سے سائٹ پر لوڈ کم پڑتا ہے۔

پلگ ان کی مدد سے کسٹم ہیڈر ویجٹ ایریا کیسے بنائیں

➊ اس پلگ ان کو ڈان لوڈ انسٹال اور ایکٹیو کریں۔ ➋ ورڈپریس کے ڈیش بورڈ میں جائیں مینو پر کلک کریں نیچے CWA Settings کے آپشن کے تحت Custom Widget Area پر کلک کریں۔

ایک دوسرا پیج کھل کر آئیگا اوپر والے باکس میں جہاں Widget area name لکھا ہوا ہے وہاں کوئی نام لکھیں اور نیچے Create بٹن پر کلک کردیں۔ نیچے Get code بٹن پر کلک کریں ایک کوڈ نظر آئے گا اسے کاپی کرلیں۔ یا اس کوڈ کو کوپی کریں اور ویجٹ آئی ڈی کاپی کر کے اس میں پیسٹ کرلیں

<?php dynamic_sidebar(  'یہاں آئی ڈی پیسٹ کریں' ); ?>
IMG_20200814_181547

“اپیرینس” کے تحت » “تھیم ایڈیٹر” کے اندر » “ہیڈر ڈاٹ پی ایچ پی” فائل پر کلک کریں یہاں بہت سارا کوڈ نظر آئے گا جس سکشن میں ویجٹ شو کروانا چاہتے ہیں وہاں پیسٹ کر دیں اور نیچے Update بٹن پر کلک کردیں
Appearance » theme editor » header.php

IMG_20200815_005907

نوٹ: کوڈ پیسٹ کرتے وقت ذرا محتاط رہیں کوڈ اچھی طرح سے پیسٹ کریں کسی کوڈ کے اندر نہ ڈالیں کوڈ کے نیکسٹ لائن میں پیسٹ کریں۔ اور اگر چائلڈ تھیم میں یہ کام کریں تو اور بہتر ہے۔
اسکرین شارٹ 👇

IMG_20200815_001820

کوڈنگ کی مدد سے کسٹم ویجٹ ایریا کیسے بنائیں

اس 👇 کوڈ کو کاپی کریں اور ورڈپریس کے ڈیش بورڈ میں جائیں مینو پر کلک کریں، { اپیرینس کے تحت تھیم ایڈیٹر پر کلک کریں }
Appearance » theme editor

تھیم سلیکٹ کریں فنکشن ڈاٹ پی ایچ پی (Function.PHP) فائل پر کلک کریں یہاں بہت سارا کوڈ ہوگا اخیرمیں انٹر مار کر اس کوڈ کو پیسٹ کر دیں۔

کسٹم ویجیٹ ایریا { function.php } کوڈ

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

➋ اس👇 کوڈ کو کاپی کریں اور ہیڈر ڈاٹ پی ایچ پی (Header.PHP) فائل میں جاکر جس جگہ آپ کو شو کرانا ہو وہاں پیسٹ کر دیں۔ مثلاً: بالکل سب سے “اوپر”  “مینو” سے پہلے “مینو” کے “بعد۔ اور نیچے اپڈیٹ بٹن پر کلک کرکے اپڈیٹ کرلیں۔ Appearance >> Theme editor >> heade.php

IMG_20200815_001820

کسٹم ویجیٹ ایریا { header.php } کوڈ

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
     
<?php endif; ?>

➌ اگر آپ کا ہیڈر ویجٹ صحیح طور پر شو نہیں کر رہا ہے تو اس👇 کوڈ کو کاپی کریں اور اپیرینس کے تحت کسٹمائز اور اس کے بعد ایڈشنل سی ایس ایس میں جاکر اسے پیسٹ کردیں۔ اسکرین شارٹ 👇
Appearance » Customize » additional CSS

IMG_20200815_010701

کسٹم ویجیٹ ایریا CSS کوڈ

div#header-widget-area {    width: 100%;    text-align: center;	  padding-right: 5%;	  padding-left: 5%;    }h2.chw-title {    margin-top: 5px;    text-align: center;    text-transform: uppercase;    font-size: small;    background-color: #feffce;    width: 75px;    padding: 0px;    }

اب آپ اپیرینس کے تحت ویجٹس میں جاکر اپنا ویجٹ شامل کرسکتے ہیں۔ Appearance >> Widgets

IMG_20200815_012108

Leave a Reply

حالیہ پوسٹ