على مدار العام ، اكتسبت واحدة من أفضل المنصات مفتوحة المصدر مثل WordPress شعبية هائلة من حيث نظام إدارة المحتوى البسيط والمرن الذي أصبح أسهل كثيرًا لمستخدميها. لقد ولت الأيام التي طلبت فيها خبيرًا في البرمجة لإنشاء موقع الويب الخاص بعملك.
لحسن الحظ ، نحن نعيش الآن في عصر تكنولوجي عالي ، حيث توجد العشرات من أطر العمل التي تزودنا بمنصات رائعة لأنظمة إدارة المحتوى.
أهمها بالطبع هو WordPress.
نحن كشركة لتطوير البرمجيات نتلقى العديد من الطلبات حيث يرغب العملاء في التبديل من HTML إلى WordPress للحصول على تحكم أفضل في CMS.
لذلك ، في هذه المدونة ، سنعلمك كيف يمكنك تحويل موقع HTML الثابت الخاص بك إلى WordPress ، يجب أن يكون لديك بعض المعرفة الأساسية بـ HTML و CSS و PHP.
هناك ثلاث طرق لإجراء هذا التحويل ، ولكن في هذه المدونة ، سنعرض لك الطريقة اليدوية للقيام بذلك حتى تتمكن من تكوين فكرة عن التغييرات التي أجريتها وكيف تنعكس.
1. التحويل اليدوي من HTML إلى WordPress
2. تحويل HTML من خلال موضوع تابع لـ WordPress
3. استيراد محتوى HTML إلى WordPress باستخدام البرنامج المساعد
التحويل اليدوي من HTML إلى WordPress
الخطوة 1: قم بإنشاء مجلد سمة جديد وملفات أساسية
أول شيء عليك القيام به هو إنشاء مجلد سمة على سطح المكتب الخاص بك أو في أي دليل بجهاز الكمبيوتر الخاص بك. يمكنك تسميته ما تريد أن يطلق عليه موضوعك.
بعد ذلك ، انتقل إلى أي من محرري التعليمات البرمجية وأنشئ بعض الملفات النصية وقم بتسميتها على النحو التالي:
ط) style.css
ب) index.php
ثالثا) header.php
رابعا) sidebar.php
ت) تذييل. php
الخطوة 2: انسخ CSS الموجودة إلى ورقة أنماط جديدة
للخطوة التالية ؛ سيتعين عليك نسخ ترميز CSS من موقع HTML الحالي الخاص بك إلى ورقة أنماط WordPress.
الآن ، قبل نسخ HTML CSS ، افتح style.css والصق ما يلي:
/*Theme Name: Twenty TwentyTheme
URI: https://wordpress.org/themes/twentytwenty
Author: John DoeAuthor
URI: https://wordpress.org/
Description: Twenty Twenty
themeVersion: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, orange, brown, white, tan, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentytwenty*/هذا هو عنوان ورقة الأنماط ، سيتعين عليك نسخ سطر الكود بالكامل بما في ذلك التعليق / * .........*/
فيما يلي وصف التفاصيل لسطر الرمز هذا:
✔اسم الموضوع: يمكن أن يكون هذا أي شيء تريده
✔عنوان URL للموضوع: عنوان الموقع أو معلومات الصفحة الرئيسية
✔المعلن / كاتب التعليق: يمكن أن يكون اسمك
✔عنوان URL للمؤلف: يمكن أن تكون كما هي كما أضفنا أعلاه أو يمكنك إضافة رابط إلى صفحتك الرئيسية أو أي شيء له معنى.
✔الوصف: اختياري ، يمكن أن يكون كما هو أو يمكنك إضافة أي وصف تريده. سيظهر في الواجهة الخلفية لـ WordPress.
✔التجريبية: إنه في الأساس إصدار السمة الخاص بك. نظرًا لأنه ليس موضوعًا للنشر ، يمكنك البدء بـ 1.0 هنا.
✔الترخيص ، وعنوان URI للترخيص ، والعلامات: إلزامي فقط إذا كنت سترسل السمة إلى دليل WordPress ليستخدمها الآخرون. إذا كنت تحتفظ به لنفسك ، فلا تقلق بشأنه. احتفظ بها كما هي.
بمجرد الانتهاء من ذلك عن طريق إضافة ما سبق إلى ملف style.css الخاص بك ؛ انسخ والصق CSS لموقع HTML الحالي في هذا الملف. احفظ الملف ثم اغلقه.
هذا الموضوع ذو علاقة بـ: أفضل ملحقات WordPress لتحسين الموقع
الخطوة 3: افصل HTML الحالي
في WordPress للوصول إلى معلومات قاعدة البيانات ، يتم استخدام PHP. نتيجة لذلك ، يجب فصل شفرة HTML الموجودة في index.html إلى أجزاء ، حتى يتمكن WordPress CMS من دمجها بشكل صحيح.
لتحقيق ذلك ، سيتعين عليك نسخ أجزاء من مستند HTML الأصلي إلى ملفات مختلفة قمت بإنشائها في الخطوة الأولى.
أولاً ، افتح ملف index.html الخاص بك بعد ذلك ، انتقل إلى ملف WordPress الذي تم إنشاؤه حديثًا:
header.php:
من بداية ملف HTML الخاص بك إلى منطقة المحتوى الرئيسية مثل أو ينتقل إلى ملف header.php. لذا ، انسخ الكود والصقه بعد ذلك مباشرة قبل أن يظهر انسخ والصق التالي
الشريط الجانبي. php
تحقق مرة أخرى من ملف index.html الخاص بك ؛ البحث والبحث أو ولاحظ علامة الإغلاق . الآن ، كل ما هو داخل هذا القسم ، انسخ والصق داخل ملف sidebar.php ؛ احفظها وأغلقها.
footer.php
الآن ، كل ما تبقى من نهاية الشريط الجانبي (على سبيل المثال ) حتى نهاية ملف index.html يجب أن تكون معلومات التذييل. سيتم إضافة ذلك إلى هذا الملف. بعد ذلك مباشرة قبل قوس الإغلاق نسخ ولصق العلامة التالية
حفظ الملف
بمجرد الانتهاء من ملف index.html ، احفظه وأغلقه أيضًا
اقرأ أيضًا: يجب استخدام ملحق Magento 2 للحصول على وظائف إضافية
الخطوة 4: قم بإنهاء ملفات header.php و index.php الخاصة بك لبرنامج WordPress
الآن الخطوات الأخيرة التي يجب عليك اتخاذها من أجل header.php و index.php هي التنسيق التالي:
ابحث عن الرابط في ملف قسم يشبه هذا:
<link rel=”stylesheet” href=”style.css”>استبدل الرابط بالرابط أدناه:
<link rel=”stylesheet” href=”<?php
echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />الآن احفظ وأغلق ملف header.php.
في ملف index.php الخاص بك ؛ أدخل ما يلي ، بالضبط مثل هذا:
<?phpget_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>تأكد من أن المسافة بين سطري الكود أعلاه كما هي ، واحدة تلو الأخرى. هذا لأنك ستلصق رمز الحلقة أدناه (https://codex.wordpress.org/The_Loop)
الحلقة تبدأ هنا:
<?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><!--endpost 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><!--endentry-->
<div class="post-footer">
<div class="comments">
<?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
</div><!--endpost footer-->
</div><!--endpost-->
<?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><!--endnavigation-->
<?php else: ?>
<?php endif; ?>بعد ذلك ، احفظ وأغلق الملف. الموضوع الأساسي جاهز.
الخطوة 5: قم بتحميل المظهر الجديد الخاص بك
لتحميل المظهر الخاص بك ، اتبع الخطوات التالية:
1. قم بإنشاء ملف مضغوط للمجلد الخاص بك
2. اذهب إلى WordPress
3. حدد المظهر-> الموضوع-> انقر فوق إضافة جديد في الأعلى
4. انقر فوق تحميل الموضوع.
5. قم بتحميل ملف مضغوط وانقر فوق التثبيت الآن.
بمجرد الانتهاء من ذلك ، يمكنك بسهولة تنشيط المظهر الخاص بك.
هذه هي الخطوات الأساسية التي يجب على المرء القيام بها إذا كنت تقوم بتحويل موقع HTML الخاص بك إلى سمة WordPress يدويًا. على الرغم من أنه لا يزال يتعين القيام بالكثير من العمل لترحيل المحتوى بالكامل من HTML إلى WordPress من حيث الصفحات.
إذا كنت قد اتبعت مدونتنا كدليل للانتقال من HTML إلى WordPress ، فمرحبًا بك على متن الطائرة ، فقد انضممت إلى أحد أكبر مجتمعات CMS مفتوحة المصدر في العالم.
خدمات تطوير الويب
هل تبحث عن شركة تطوير ويب موثوقة؟ يمكّننا مطورو الويب ذوو المهارات العالية لدينا من تقديم خدمات تطوير الويب الموجهة نحو النتائج. اتصل بفريقنا لفهم كيف يمكننا مساعدتك في تحقيق أهداف عملك.