بناء صفحة الهبوط في وورد بريس الدرس الحادي عشر

 بناء صفحة الهبوط في وورد بريس الدرس الحادي عشر

في هذا المقال سوف نتحدث عن بناء صفحة الهبوط في وورد بريس الدرس الحادي عشر , كما تحدثنا في الدروس السابقة وتعلمنا كيفية انشاء الاقسام الاساسية من قالب ووردبريس كـ footer ,Header,function,blog post   وغيرها  في وورد بريس , اليوم سوف نبدأ العمل بالتصميم واظهار او اضفاء طابعنا الفني في الموقع .

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

  • الآن سنذهب الى محرر الأكواد في الذي نستخدمه و سوف نقوم بانشاء ملف جديد ل، صفحة الهبوط في وورد بريس  في الثيم كأي ملف آخر وسنقوم باعطاءه الاسم front-page.php.. ثم سنقوم بوضع الكود التالي به .
<?php
/*
 * Template Name: Front page
*/
  
get_header(); ?>
 
 
<?php get_footer();?>

كما تلاحظ قمنا بوضع السطر Template Name وهنا تعلمنا كيفية انشاء نموذج للصفحة واعطيناه الاسم Front page .. الآن اذهب الى الصفحة التي قمت بانشاءها في وورد بريس وقم باختيار من قسم نموذج Template  الاسم الذي اعيطناه منذ قليل أيّ Front page

الآن جاهز للعمل .. ماذا سنفعل بعدها ؟

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

  • القسم الأول , انسخ الكود التالي وضعه بعد السطر get_header
<div class="frontpage-header">
   <div class="container">
    <button class="btn btn-warning btn-block">مرحبا بكم في موقعنا </button>
   </div>
</div>

الآن في الكود التالي سوف تجد قسم التخصيص الذي سنضعه في style.css :

.frontpage-header{
    background-image: url('https://studyshoot.com/wp-content/uploads/2020/04/wordpress-11.jpg');
    position: relative;
    background-color:#131417;
    background-size: contain;
    min-height: 1000px;
    height: 100%;
    width: 100%;
    display: flex;
    background-attachment: scroll;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 2;
    background-position: center center;
}

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

الآن ان لاحظت بفتح الصفحة الرئيسية ستجد الشكل المطلوب الذي تحدثنا عنه ..

  • القسم الثاني هو انشاء مكان للمحتوى في صفحة الهبوط وورد بريس . فقط قم بكتابة الكود التالي مباشرة بعد آخر علامة اغلاق div الاخير ..
<?php if(have_posts() ): while(have_posts() ): the_post(); ?>
<?php the_content();?>
<?php endwhile; else : endif;?>

الآن ما ستكتبه في محرر الصفحة الخلفي سوف يظهر في الصفحة الرئيسية في حال كنت تريد استخدام المحرر Gutenberg في انشاء بعض الاقسام , سأترك الخيار لك , ولكن الآن لا أريد أن استخدم محرر جوتنبرغ واريد أن اقوم بتصميم كل المحتوى من خلال الكود في ملف theme

  • القسم التالي هو انشاء عرض الخدمات بالايقونات و  معرض للصور .

قبل أن نبدأ بكتابة الكود , سنقوم بتعريفكم على كيفية ضمّ و استخدام الأيقونات من نوع svg في موقعي .

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

اذهب الآن الى اسفل أخر كود كتبناه وقم بلصق الكود التالي :

<content class=" frontpage-services"> 
    <div class="container"> 
        <div class="row">
            <div class=" col-sm-4   col-6">
              <div class="services">
                 <div class="cards"> 
                <p> الخدمة الأولى   </p>
               <?php echo file_get_contents(get_template_directory_uri() . '/images/code.svg'); ?>  
               </div>
            </div> 
          </div>
          <div class=" col-sm-4   col-6">
              <div class="services">
                 <div class="cards"> 
                <p> الخدمة  الثانية </p>
                <?php echo file_get_contents(get_template_directory_uri() . '/images/code.svg'); ?> 
               </div>
            </div>  
          </div>
          <div class=" col-sm-4   col-6">
              <div class="services">
                 <div class="cards"> 
                <p> الخدمة الثالثة </p>
               </div>
               </a>
            </div> 
          </div>
          <div class=" col-sm-4  col-6">
              <div class="services">
                 <div class="cards"> 
                <p> الخدمة الرابعة </p>
                <?php echo file_get_contents(get_template_directory_uri() . '/images/code.svg'); ?> 
               </div>
            </div> 
          </div>
          <div class=" col-sm-4   col-6">
              <div class="services">
                 <div class="cards"> 
                <p> الخدمة السادسة </p>
                <?php echo file_get_contents(get_template_directory_uri() . '/images/code.svg'); ?> 
               </div>
            </div> 
          </div>
          <div class=" col-sm-4   col-6">
              <div class="services">
                 <div class="cards"> 
                <p> الخدمة السابعة </p>
                <?php echo file_get_contents(get_template_directory_uri() . '/images/code.svg'); ?> 
               </div>
            </div> 
          </div>
        </div>
    </div>    
 </content>

في السطر من الكود السابق , قمنا بكتابة

<?php echo file_get_contents(get_template_directory_uri() . '/images/code.svg'); ?>

وهذا يعني اننا نخبره بأنه يجب عليك أن تقوم بجلب القسم الموجود في مجلد الثيم , وهو اسمه images وفي هذا المجلد قم بجلب واظهار الايقونة التي قمنا بحفظها والتي اعطيناها الاسم عند حفظها أيّاً كان ..

ملاحظة قبل البدء الخطوة التالية :

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

width="50px" height="50px" 

كما أنك تستطيع تعديل الارتفاع والعرض كما تشاء ..

الخطوة التاليه هي اذهب الى ملف style.css وقم بلصق الكود التالي :

  .frontpage-services {
        text-align: center;
        font-size: 17px;
        font-weight: 600 ; 
    }
    .services{
     
        padding-top: 10px; 
    }

قم بالقاء نظره على الصفحة إن كان كل شيء على ما يرام

  • الآن معرض الصور البسيط الذي سوف نقوم بالتحكم فيه و بتنسيقه لاحقاً , استخدم الكود التالي وحاول فهم محتواه لتتمكن من التعديل 
 <div class="container"> 
  <div class="containers">
                        <div class="thumbex">
                <div class="thumbnail" >
            <a href="https://studyshoot.com/germany/">
            <img src="https://studyshoot.com/wp-content/uploads/2019/12/Study-in-Germany.png">                              
                    <span class="btn btn-primary btn-lg btn-block"> مرر هنا 
                        </span>   
                    </a>
                </div>  
            </div>
            <div class="thumbex">
            <div class="thumbnail" >
            <a href="https://studyshoot.com/romania-2/">
            <img src="https://studyshoot.com/wp-content/uploads/2020/03/romania_flag_on_world_map_-_photo_155731882_c_hyotographics_-_dreamstime.com_.jpg">                             
                    <span class="btn btn-primary btn-lg btn-block"> مرر هنا 
                        </span>
                    </a>
                </div>  
            </div>
            <div class="thumbex">
            <div class="thumbnail" >
            <a href=" https://studyshoot.com/uk-admissions/">
            <img src="https://studyshoot.com/wp-content/uploads/2019/12/map-of-the-united-kingdom-3d-model-max-obj-3ds-1.jpg">                              
                    <span class="btn btn-primary btn-lg btn-block"> مرر هنا 
                        </span>
                    </a>
                </div>  
                    </div>
   </div>
</div>

وكود التنسيق سيكون :

.containers h2 {color: #FFFFFF;font-size: 20px;font-weight: 600;line-height: 2em;}
.country-header{margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;background-color: #0F6F97;}
/*Post On Hover list*/
.containers {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  padding: 0 0px;
}
.containers .thumbex {
  margin: 10px 10px 10px;
  width: 100%;
  min-width: 250px;
  max-width: 435px;
  height: 300px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  outline: 2px solid white;
  outline-offset: -15px;
  box-shadow: 5px 10px 40px 5px rgba(0, 0, 0, 0.5);
}
.containers .thumbex .thumbnail {
  overflow: hidden;
  min-width: 250px;
  height: 300px;
  position: relative;
  opacity: 0.88;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
  background-size: cover;
  background-repeat: no-repeat;
}
.containers .thumbex .thumbnail img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  height: 115%;
  width: auto;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}
.containers .thumbex .thumbnail span {
  position: absolute;
  z-index: 2;
  top: calc(150px - 20px);
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  height:auto;
  text-align: center;
  font-size: 17px;
  color: white;
  font-weight: 300;
   letter-spacing: 0.2px;
  transition: all 0.3s ease-out;
}
.containers .thumbex .thumbnail:hover {
  backface-visibility: hidden;
  transform: scale(0.9 ,0.9 );
  opacity: 1;
}
.thumbex a{
  color: white;
 }
.containers .thumbex .thumbnail:hover span {
  opacity: 1;
  color: white; 
  background:  #3D9970;
  backface-visibility: visible;
}

قم بتحديث  الصفحة والنظر هل كل شيء على مايرام ؟

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