إضافة مواقع التواصل ووردبريس من قسم تخصيص

إضافة مواقع التواصل ووردبريس هو موضوع مهم للكثير من أصحاب المواقع , ولربما تجد صعوبة في ايجاد اضافات مجانية تقوم بعمل ذلك ,وضمن هذه السلسلة التي نتعلمها الآن في موقع ستودي شووت لانشاء قالب ووردبريس من الصفر سوف نتعلم اليوم كيفية كتابة الكود لاظهار السوشال ميديا في قسم تخصيص ووردبريس واظهارها في أي قسم من أقسام الموقع لدينا

تخصيص القالب في ووردبريس customizer هو ما يعرف عند الذهاب الى قسم مظهر , ثم الضغط على تخصيص , ستجد عادة في كل ثيم منصب اقسام معينة مثل التحكم بالخطوط , الألوان , التحكم بعرض المحتوى والصفحات ,وكذلك عرض الصور والتصنيفات في المقالات الخ … وهذا ما يسمى Theme Customization API

في الدرس السابق قمنا بشرح وتعريف الكود المستخدم في تخصيص القالب في ووردبريس , وفي هذا الدرس سوف نقوم أيضاً بانشاء اقسام جديدة , وهي التالي :

• اظهار السوشال ميديا في موقع ووردبريس

الخطوة الأولى :

اذهب الى ملف customizer.php وقم بلصق الكود التالي :

<?php 
function studyshoot_control_options($wp_customize){
                $wp_customize->add_section('studyshoot_social_media_buttons' , 
                        array(
                            'title'=> __('ايقونات التواصل الاجتماعي','ant' ),
                             ));
            $wp_customize->add_setting('facebook_social_button' , 
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'facebook_social_button', 
                    array(
                        'label'=>__('Facebook ' , 'studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'facebook_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('twitter_social_button' , 
                    array(
                        'default'=> '#','transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'twitter_social_button', 
                    array(
                        'label'=>__('Twitter' , 'studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'twitter_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('youtube_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'youtube_social_button',
                    array(
                        'label'=>__(' Youtube','studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'youtube_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('instagram_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'instagram_social_button', 
                    array(
                        'label'=>__(' Instagram', 'studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'instagram_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('behance_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'behance_social_button', 
                    array(
                        'label'=>__(' Behance ', 'studyshoot' ) ,
                        'section' => 'studyshoot_social_media_buttons',
                        'settings'=>'behance_social_button',
                        'type'=>'link'
                        )));
            $wp_customize->add_setting('pinterest_social_button' ,
                    array(
                        'default'=> '#',
                        'transport'=>'refresh',
                        'sanitize_callback' => 'esc_url_raw',
                        ));
            $wp_customize->add_control(new Wp_Customize_Control (
            $wp_customize,'pinterest_social_button',
                    array(
                        'label'=>__(' pinterest    ','studyshoot' ) ,
                        'section'    => 'studyshoot_social_media_buttons',
                        'settings'=>'pinterest_social_button',
                        'type'=>'link'
                        )));
}
add_action( 'customize_register','studyshoot_control_options' );

كما لاحظت قمنا بانشاء اعدادات و ضبط اي add_control و add_setting لكل قسم من أقسام السوشال ميديا واعطينا لكل واحد مسمى .

الخطوة الثانية :

هي الذهاب الى مجلد الثيم , وقم بانشاء مجلد جديد , أعطه الاسم sections , ثم داخل هذا المجلد قم بانشاء ملف جديد قم باعطاءه الاسم social-media.php , ومن ثم قم بلصق الكود التالي ضمن الملف الأخير :

function studyshoot_social_media_boxes(){
 	?>
        <br>
 	<div class="social-follow" > 
 						 
					 	 <div class="box social-box-facebook">
						   <a href="<?php echo (get_theme_mod('facebook_social_button')) ?>">  facebook</a>
 						
 
						</div>
					 	 <div class="box social-box-pinterest">
					 <a href="<?php echo  (get_theme_mod('pinterest_social_button')) ?>">   pinterest</a>
 						
 
						</div>

					 	 <div class="box social-box-twitter">
							<a  href="<?php echo  (get_theme_mod('twitter_social_button')) ?>">  twitter</a>
						</div>
 
				 
					 	 <div class="box social-box-youtube">
							 <a  href="<?php echo  (get_theme_mod('youtube_social_button')) ?>">  youtube </a>
						</div>
					 	 <div class="box social-box-instagram">
						 <a  href="<?php echo  (get_theme_mod('instagram_social_button')) ?>">  instagram </a>
						</div>
					 	 <div class="box social-box-behance">
							<a  href="<?php echo  (get_theme_mod('telegram_social_button')) ?>"> behance</a>
				 
					 </div>
					 </div>
<?php }
add_filter ('studyshoot_social_media','studyshoot_social_media_boxes');

في الكود السابق , قمنا بانشاء أمر + قسم لتخصيص و انشاء ايقونات التواصل الاجتماعي ,

الخطوة الثالثة :

هي الذهاب الى ملف style.css ولصق كود التنسيق التالي :

 .social-follow {
     justify-content: center;
     align-items: center;
     display: flex;
}
 .box{
     color: white;
     padding: 10px;
     position: relative;
     overflow: hidden;
     border-radius: 2px;
     clear: both;
     margin: 0px 0px 0px 10px;
}
 .social-box-facebook{
     background-color: #3b5998 !important;
}
 .social-box-twitter{
     background-color:#1da1f2 !important;
}
 .social-box-youtube{
     background-color: #ef4e41 !important;
}
 .social-box-instagram{
     background-color: #c13584 !important;
}
 .social-box-behance{
     background-color:#1879fd !important;
}
 .social-box-pinterest{
     background-color: #bd081c !important;
}
 .social-follow a{
     text-decoration: none;
     text-transform: uppercase;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
     margin:0px;
}
 .box svg{
     margin-right:5px;
}
 .box:hover{
     opacity: 0.8;
     outline-width: 0;
}

اقرأ أيضاً : كيف أقوم باظهار قسم حقوق النشر في قسم تذييل الموقع ؟

كما تلاحظ , قمنا بانشاء تنسيق خاص لكل أيقونة من أيقونات التواصل الاجتماعي . اما عن المرحلة التاليه هي مرحلة اظهار الايقونات في قسم الموقع الذي نريد , كل ماعليك هو الذهاب الى القسم الذي تريد عرض أيقونات التواصل الاجتماعي به || الصفحة الرئيسية || ترويسة الموقع || الشريط الجانبي || على سبيل المثال ومن ثم لصق الكود التالي :

<?php echo studyshoot_social_media_boxes(); ?>

وايضاً اذهب الى ملف function.php , ولاتنسى بادخال الكود التالي :

require_once(get_template_directory().'/sections /social-media.php');

الخطوة الرابعة :

هي الذهاب الى قسم مظهر في ووردبريس , ثم الى تخصيص , ستجد هناك قسم جديد اسمه ايقونات مواقع التواصل ,ادخل اليه ومن ثم قم بلصق الرابط للملحق الذي تريد واضغط على حفظ ..

كل شيء على مايرام ؟

تابعني في الدروس اللاحقة عن انشاء كودات تخصيص قالب ووردبريس