موقع المنح الدراسية العربي الأول

القائمة ☰

التسجيل

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

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


شارك هذه الفرصة مع الأصدقاء

انشاء نموذج للمقالات في وورد بريس , سوف نقوم بكتابة وصياغة كود كامل لتصميم ما يسمى نموذج المقالات او 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 للموقع بطريقة بسيطة وسهلة مع التنسيق كامل .. تابع الدرس من هنا 



شارك هذه الفرصة مع الأصدقاء

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *



الزوار قاموا بقراءة ما يلي أيضاً

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

إضافة خطوط جوجل العربية في ووردبريس تحتاج فقط الى استخدام كود بسيط جداً والذي سوف يقوم بدوره تغير نوع الخط وهذا الكود سوف تقوم بلصقه في... قراءة المزيد

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

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

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

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

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس... قراءة المزيد

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

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات... قراءة المزيد

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

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

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

القائمة الشاملة ←

منحة جامعة وايكاتو في نيوزيلندا لدراسة البكالوريوس والماجستير والدكتوراه

تقبل منحة جامعة وايكاتو في نيوزيلندا الآن طلبات الحصول على منح التميز الدولي للطلاب الذين يسجلون لأول مرة

منحة البكالوريوس في جامعة هونج كونج

منحة البكالوريوس في جامعة هونج كونج للطلبة ذوى الكفاءات الأكاديمية العالية الفرصة للتقديم على المنحة، والمنحة مقدمة للطلاب

منحة جامعة دايتون للبكالوريوس في أمريكا

منحة جامعة دايتون للبكالوريوس للجدارة للعام الأول المختار وتحويل المتقدمين الدوليين الجامعيين. تبلغ هذه المنح الدراسية ما يصل

كورس أون لاين للتعلم الالي مقدم من جامعة ستانفورد

كورس أون لاين للتعلم الالي مقدم من جامعة ستانفورد : التعلم الآلي هو علم جعل أجهزة الكمبيوتر تعمل

STUDYSHOOT ©