شرح إضافة مربعات جانبية لقوالب وورد بريس

بسم الله الرحمن الرحيم، فى هذا الدرس سوف نتناول بالشرح طريقة إنشاء مربعات جانبية للقوالب التى لا تحتوى على مربعات جانبية، بالإضافة إلى طريقة وضع المربعات الجانبية بالفوتر .
تنقسم عملية إضافة المربعات الجانبية إلى قالب الووردبريس إلى 3 خطوات أو يتم التعديل فى 3 ملفات

أولا: يتم التعديل على ملف functions.php من خلال إضافة الكود التالى

<?php
if ( function_exists('register_sidebar') )
register_sidebars(5,array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

الآن أصبح القالب يقبل إضافة حتى العدد (5) من المربعات الجانبية

ثانياً نقوم بالتعديل على ملف Sidebar.php (القائمة الجانبية)

بعد الكود

<div id="sidebar">

نضيف الكود التالى لإنشاء ثلاثة مربعات جانبية للقائمة الجانبية

<div id="sidebar1">
     <?php if ( !function_exists('dynamic_sidebar')
	       || !dynamic_sidebar(1) ) : ?>
		        <?php endif; ?>
				   </div>
<div id="sidebar2">
     <?php if ( !function_exists('dynamic_sidebar')
	       || !dynamic_sidebar(3) ) : ?>
		        <?php endif; ?>
				   </div>
<div id="sidebar3">
     <?php if ( !function_exists('dynamic_sidebar')
	       || !dynamic_sidebar(3) ) : ?>
		        <?php endif; ?>
				   </div>

يتبقى عدد (2) مربعات جانبية متاحة ويمكن إضافتها للفوتر بعد الكود

<div id="footer">

نضيف الكود التالى

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar')
							      || !dynamic_sidebar(4) ) : ?>
								       <?php endif; ?>
									      </div>
<div id="footer-sidebar2">
					        <?php if ( !function_exists('dynamic_sidebar')
							      || !dynamic_sidebar(5) ) : ?>
								       <?php endif; ?>
									      </div>
</div> <!-- Close footer-sidebar -->
														<div style="clear-both"></div>

وبذلك تتم إضافة 5 مربعات جانبية
ثلاثة للقائمة الجانبية
وإثنان للفوتر
وتتبقى الخطوة الثالثة والأخيرة
وهى التعديل على ملف style.css لإضافة المربعات الجانبية

#sidebar {
										    border: 1px solid #cccccc;
											  display:block;
											    height: 260px;
												}
#sidebar1 {
												  float: left;
												    width: 300px;
													  margin-right:20px;
													    }
#sidebar2 {
												  float: left;
												    width: 300px;
													  margin-right:20px;
													    }
#sidebar3 {
												  float: left;
												    width: 300px;
													  margin-right:20px;
													    }

وللتعديل على المربعات الجانبية فى الفوتر
نضيف كود

#footer-sidebar {
										    border: 1px solid #cccccc;
											  display:block;
											    height: 260px;
												}
#footer-sidebar1 {
												  float: left;
												    width: 300px;
													  margin-right:20px;
													    }
#footer-sidebar2 {
												  float: left;
												    width: 300px;
													  margin-right:20px;
													    }

والآن نكون قد انتهينا من إضافة المربعات الجانبية للقالب، والله أعلى وأعلم.