تحويل قالب html;css إلى الوردبرس

بتاريخ On 4/10/2020 at 21:58 قال Mohamed Showket:

اريد تعلم كيفية تحويل قالب html;css ال الورد رس

السلام عليكم @Mohamed Showket

قمت بعمل خطوات تحويل اي ملف html ,css,javascript  الى قالب ووردبريس جاهز للتفعيل من لوحة تحكم ووردبريس  

نبدا اتبع خطوة خطوة :

اولا قم بانشاء مجلد هذا المجلد سيحتوي على كل ملفات الثيم(القالب) الخاص بنا لرفع على ووردبريس قمت بتسميته كما تريد .

ثانيا قم بانشاء الملفات التالية بامتداد .php  داخل مجلد الثيم الذي قمنا بانشائه سابقة 
 

style.css

Index.php

header.php

sidebar.php

footer.php

ثالثا قم بنسخ الستايل الخاص بك الى ملف 

style.css

بعد ذلك قم بوضع التالي في بداية ملف والستايل الخاص بك اسفله  

style.css

/*
Theme Name: wordpress theme.
Theme URI: my theme url
Description: A brief description.
Version: 1.0
Author: Mohamd
Author URI: Author Website url.
*/

وقم باستبدال القيم باسم الثيم الخاص بك (اي اسم تريد) او يمكنك الابقاء عليه كما هو ,هذا الكود المسؤول عن اظهار اسم الثيم الخاص بك في لوحة تحكم ووردبريس ,

رابعا قم بتقسيم (فصل ) ملف ال html الخاص بك ,كيف ذلك ؟ تابع  

١- قم  بفتح ملف ال html الخاص بك في اي محرر اكواد ,وقم بالتحديد من بداية الملف نزولا الى div  ال main او المحتوى الرئيسي ثم قم بالنسخ ما قمت بتحديده ومن ثم اللصق بملف 

header.php

ثم قم بالحفظ واغلاق الملف .

٢- قم بتحديد div السايدبار وانسخ ما بين الوسم ثم قم باللصق بملف 

sidebar.php

ثم الحفظ واغلاق الملف.

٣- قم بنسخ كل شيء تبقى بعد نهاية div السايدبار لنهاية ملف ال html ثم قم بلصقه بملف

footer.php

ثم حفظ واغلاق الملف.

٤- اخيرا قم بنسخ ما تبقى وهو المحتوى main content عادتا يكون بين وسم ال body ,ثم قم باللصق بملف 

index.php 

ثم حفظ واغلاق الملف.

خامسا قم بربط المحتويات مع بعض كيف ؟ تابع  

قم بفتح ملف 

 index.php

في بداية الملف اول سطر قم بلصق الكود التالي وظيفته يجلب الهيدر الذي قمنا بحفظه مسبقا

<?php get_header(); ?>

وفي الاسفل قم بلصق الاكواد التالية 

<?php get_sidebar(); ?>
<?php get_footer(); ?>

اخيرا والجزء الاهم وهو لجعل ووردبريس يقوم بعرض البوستات او المحتوى الخاص بك نقوم بلصق الكود التالي كالمحتوى اي بين الهيدر والسايدبر , 
 

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

الشكل النهائي لملف 

index.php

يصبح هكذا 

<?php get_header(); ?>


<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
       <?php the_content(); ?>
       <?php edit_post_link(); ?>
       <?php wp_link_pages(); ?> </div>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
    <div class="navigation index">
       <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
       <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>







<?php get_sidebar(); ?>
<?php get_footer(); ?>

الان بعد ما انتهينا يمكنك الذهاب الى لوحة تحكم الووردبريس الخاصة بك من خلال

WP Admin > Appearance > Themes

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

هكذا اوجزت كيفية تحويل html,css,javascript الى قالب ووردبريس كامل  

اتمنى ان اكون قد افدت احد في هذه الاجابة 

تحياتي

شكرا لك