منوعات

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

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

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

تنقسم عملية إضافة المربعات الجانبية إلى قالب الووردبريس إلى 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;
													    }

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