انشاء نموذج للمقالات في وورد بريس الدرس التاسع

 انشاء نموذج للمقالات في وورد بريس الدرس التاسع

انشاء نموذج للمقالات في وورد بريس , سوف نقوم بكتابة وصياغة كود كامل لتصميم ما يسمى نموذج المقالات او Post template , أي بمعنى آخر , هي الصفحة التي ستظهر بنا محتوى المقالات التي سنكتبها وننشرها في موقعنا الالكتروني , كل ما عليك فعله الآن هو التوجه الى ملف Single.php لآنه هذا الملف هو المسؤل عن اظهار المقالات التي سنكتبها في الموقع ,

سنقوم بانشاء عمودين للمحتوى , العمود الأول لاظهار محتوى المقال , والعمود الثاني لاظهار الشريط الجانبي , او ما يسمى Sidebar..

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

المرحلة الأولى :

سنقوم بانشاء عمودين الأول اعرض من الثاني بمرتين , انظر الكود التالي :

<?php
get_header(); ?>
<div class="overflow-hidden">
   <div class="row">
   	<div class="col-lg-8">
   		
   	</div>
   	<div class="col-lg-4">
   		
   	</div>
   </div>
</div>
<?php get_footer();?>

المرحلة التالية

  • نريد أن نظهر اسم المنشور , وهنا لدينا كود يستيطع وورد بريس قراءته لاظهار اسم المنشور , واعني بالاسم أيّ العنوان . والكود هو
<?php the_title();?>
  • كذلك نريد أن نظهر الصورة المصغرة أو ما يسمى Featured Image  . كيف ذلك , ايضاً هناك عدة طرق لإظهارها ولكن سأقوم باستخدام الكود التالي حتى نستطيع لاحقاً التحكم بطول وعرض هذه الصورة ضمن المحتوى , انظر الكود
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' );  ?>
      <div class="post-thumbnail" style="background-image:url('<?php echo $url ?>');"  alt="Card image cap"></div>
<?php endif; ?>

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

  • الآن نريد أن نظهر المحتوى , فعلى سبيل المثال وانا اكتب الآن , هذا ما يسمى المحتوى , أي ماتكتبه من منشورات في المحرر أو في مصمم الصفحات , لذلك تحتاج أيضأ الى أهم كود وهو  التالي:
<?php if(have_posts() ): while(have_posts() ): the_post(); ?>
<?php the_content();?>
<?php endwhile; 
else :endif;?>

شرح الكود : نقول لوورد بريس بأن يظهر لنا المحتوى للمقال في حال وجوده , في كل المقالات والصفحات كلاّ على حدا ..ويسمى المحتوى بخصائص وورد بريس the_content

الآن كل تلك الأكواد كانت من أجل اظهار محتوى المقال , ولكن أين سنضعها ؟ ..حسناً , انظر الكود التالي ..ستجد صفحة الكود الكاملة في أسفل المقال التي يجب عليك نسخها كلها ووضعها في ملف single.php ولكن الآن اقرأ حتى تفهم ما يجري …

<?php
get_header(); ?>
<div class="overflow-hidden">
    <div class="container">
        <content class="content"> 
                   	<div class="row">
                   	<div class="col-lg-8">
                   				<h2> <?php the_title();?></h2>
                   					<?php if (has_post_thumbnail( $post->ID ) ): ?>
                                		<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' );  ?>
                                   				<div class="post-thumbnail" style="background-image:url('<?php echo $url ?>');"  alt="Card image cap">
                                    			</div>
                                 	<?php endif; ?>


                                 	<?php if(have_posts() ): while(have_posts() ): the_post(); ?>
                                    <?php the_content();?>
                                     <?php endwhile; else : endif;?>
                   	</div>
                   	<div class="col-lg-4">
                   		
                   	</div>
                   	</div>
        </content>
    </div>
</div>
<?php get_footer();?>

كما تلاحظ أيضاً قمنا بإدخال كلاس جديد وهو container و ايضاً overflow-hidden وهذا الكلاس تابع لـ Bootstrap  الذي سيقلل من عرض المحتوى من اليمين واليسار.. ولكي نتجنب خروج المحتوى عن السطر وامّا عن الكلاس content  فهذا ما سنحتاجه الآن لتعريف محتوى المنشور كي نستطيع التنسيق . تابع القراءة حتى تفهم ماذا يعني تعريف المحتوى للتنسيق

الآن كما تلاحظ قمنا باظهار المحتوى بشكل كامل , عنوان المقال , صورة المقال الرمزية , ومحتوى المقال , سيقى لدينا الآن التنسيق , ونعني بالتنسيق الأولي, الألوان , حجم الخط , ارتفاع الخط , حجم الصورة وعرضها , ..لننتقل الى قسم التنسيق . 

.content h2{
    font-weight: 600;
    font-size: 22px;
    line-height: 1.8;
    color:#DC143C;
    padding-top: 25px;
    padding-bottom: 20px;
}
.content .post-thumbnail{
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;box-shadow: 0 0.625rem 1.5rem rgba(64,64,64,.14);
    border: 1px solid #ddd !important;
}
  • كما تلاحظ قمنا باضفاء تنسيقنا الخاص على صفحة محتوى المقال لتظهر لنا بالشكل التالي :
 صفحة محتوى المقال  ووردبريس

المرحلة الثانية

هي تنسيق sidebar  او الشريط الجانبي ؟ هل تريد أن تقوم باظهار الشريط الجانبي من خلال استخدام WordPress Widget , ام تريد أن تقوم بكتابة محتوى الشريط الجانبي بشكل يدوي ,

  •  اذا كنت تريد أن تستخدم  WordPress Widget  اذهب الآن الى ملف function.php  وقم بلصق الكود التالي :
add_theme_support('widgets');
function my_theme_widgets()
{
register_sidebar(
        array (
        'name'=> 'Blog Sidebar',
        'id'=> 'blog-sidebar',
        'before_widget'=> '<div class= "widget-item">',
        'after_widget'=> '</div>',
        'before_title'=> '<h3 class= "sidebar-content">',
        'after_title'=> '</h3>'
        ));
}
add_action ('widgets_init', 'my_theme_widgets');

الآن اذهب الى Appearance  ثم اضغط على Widgets ثم سترى لديك شريط جانبي يسمى  Blog Sidebar , تستطيع الآن أن تقوم بسحب الأدوات المتاحة و ارفاقها في الشريط الجانبي الذي قمنا بانشاءه ولكن انتظر ,, لم ننتهي بعد . سنحتاج الى اظهر الشريط الجانبي في ملف single.php . اذهب الى هذا الملف و الصق مباشرة بعد  <div class=”col-lg-4″>  الكود التالي :

<?php if ( is_active_sidebar( 'blog-sidebar' ) ) : ?>
    	<ul id="sidebar">
        <?php dynamic_sidebar( 'blog-sidebar' ); ?>
    	</ul>
<?php endif; ?>

الآن يتبقى لدينا تنسيق الشريط الجانبي , كما تلاحظ , اعطينا الشريط الجانبي هوية واسميناها id=sidebar , لكي نستطيع  العمل بتنسيقه كما نريد , يمكنك ان تستخدم التنسيق ما تحب وأنا في الكود التالي سأقوم بوضع تنسيقي الخاص كما تلاحظ في الصورة قبل وبعد التنسيق

.container{
    box-shadow: 0 0.625rem 1.5rem rgba(64,64,64,.14);
    padding-right: 25px;
    justify-content: right;
}
.content h2{
    font-weight: 600;
    font-size: 22px;
    line-height: 1.8;
    color:#DC143C;
    padding-top: 25px;
    padding-bottom: 20px;
}
.content .post-thumbnail{
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;box-shadow: 0 0.625rem 1.5rem rgba(64,64,64,.14);
    border: 1px solid #ddd !important;
}
#sidebar {
    padding-top:  75px;
}
#sidebar ul li{
    list-style: none;
    color: black;
}
#sidebar a{
 	text-decoration: none;
    color: black;  
}
#sidebar h3{
    position: relative;
   padding-right: 5px;
    line-height: 3 ;
    margin-bottom: 1.5rem;
    background-color: #f6f6f6;
    clear: both;
    align-items: center;
    align-content: center;
    color: #272727;
    margin-bottom: 0;
    font-size: 17px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#searchform{
    display: block;
}
#s {
    width: 100%;
    border: 1px;
    border-color: #ddd;
    background-color: #f4f4f4;
    background-image: none;
    text-shadow: none;
    color: #444;
    font-size: 14px;
  	padding: 10px 30px;
    box-sizing: border-box;
}
#searchsubmit {
    text-transform: uppercase;
    font-size: 17px;
    padding: 10px 30px;
    background-color: #6ccdd9;
    border-radius: 0px 0px 0px 0px;
    min-height: 47px;
    color: white;
    border:0px solid #6ccdd9;
    font-weight: 700; width: 100%;
}

انظر الصورة بعد ارفاق التنسيق الخاص بنا :

انشاء نموذج للمقالات في وورد بريس
  • الكود كامل الذي يوضع في single.php 
<?php get_header(); ?>
<div class="overflow-hidden">
    <div class="container">
        <content class="content"> 
                   	<div class="row">
                   	<div class="col-lg-8">
                   			<h2> <?php the_title();?></h2>
                   					<?php if (has_post_thumbnail( $post->ID ) ): ?>
                                		<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), ' ' );  ?>
                                   				<div class="post-thumbnail" style="background-image:url('<?php echo $url ?>');"  alt="Card image cap">
                                    			</div>
                                 	<?php endif; ?>
                                  

                                 	<?php if(have_posts() ): while(have_posts() ): the_post(); ?>
                                    <?php the_content();?>
                                     <?php endwhile; else : endif;?> 
                   	</div>
                   	<div class="col-lg-4">
                   		<?php if ( is_active_sidebar( 'blog-sidebar' ) ) : ?>
    					<ul id="sidebar">
        				<?php dynamic_sidebar( 'blog-sidebar' ); ?>
    					</ul>
                        <?php endif; ?>
                   	</div>
                   	</div>
        </content>
    </div>
</div>
<?php get_footer();?>
  • كود التنسيق الذي يوضع في style.css 
.container{
    box-shadow: 0 0.625rem 1.5rem rgba(64,64,64,.14);
    padding-right: 25px;
    justify-content: right;
}
.content h2{
    font-weight: 600;
    font-size: 22px;
    line-height: 1.8;
    color:#DC143C;
    padding-top: 25px;
    padding-bottom: 20px;
}
.content .post-thumbnail{
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;box-shadow: 0 0.625rem 1.5rem rgba(64,64,64,.14);
    border: 1px solid #ddd !important;
}
#sidebar {
    padding-top:  75px;
}
#sidebar ul li{
    list-style: none;
    color: black;
}
#sidebar a{
 	text-decoration: none;
    color: black;  
}
#sidebar h3{
    position: relative;
   padding-right: 5px;
    line-height: 3 ;
    margin-bottom: 1.5rem;
    background-color: #f6f6f6;
    clear: both;
    align-items: center;
    align-content: center;
    color: #272727;
    margin-bottom: 0;
    font-size: 17px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#searchform{
    display: block;
}
#s {
    width: 100%;
    border: 1px;
    border-color: #ddd;
    background-color: #f4f4f4;
    background-image: none;
    text-shadow: none;
    color: #444;
    font-size: 14px;
  	padding: 10px 30px;
    box-sizing: border-box;
}
#searchsubmit {
    text-transform: uppercase;
    font-size: 17px;
    padding: 10px 30px;
    background-color: #6ccdd9;
    border-radius: 0px 0px 0px 0px;
    min-height: 47px;
    color: white;
    border:0px solid #6ccdd9;
    font-weight: 700; width: 100%;
}

الآن هل أعجبك هذا الدرس ؟ . تابعنا في الدرس القادم حتى تتعلم المزيد , سيكون رابط الدرس العاشر من هنا , سيكون الدرس حول إنشاء footer للموقع بطريقة بسيطة وسهلة مع التنسيق كامل .. تابع الدرس من هنا