تحويل مواقع HTML إلى مواقع WordPress

في بداية (الويب) ، تم إنشاء جميع مواقع الويب باستخدام نصوص و HTML ثابت. الآن ، بعد مرور أكثر من 20 عامًا ، أصبح الويب مكانًا مختلفًا تمامًا. مواقع الويب أكثر تعقيدًا. إنها توفر تجارب أكثر ثراءً ومتعة لمنشئي المواقع والزوار على حدٍ سواء.

يعود الفضل في ذلك في جزء كبير منه إلى المشاريع مفتوحة المصدر مثل WordPress. التي نجحت ، على مدى السنوات العشر الماضية أو نحو ذلك ، في مهمتها الأساسية لإضفاء الطابع الديمقراطي على النشر عبر الإنترنت (والكثير من العمليات في هذه العملية) بحيث يمكن لأي شخص لديه تثبيت WordPress والموضوع / المكونات الإضافية المناسبة أن يكون لديه موقع ويب حديث بتصميم متقدم والوظائف. لا يوجد ترميز - ولا حتى HTML! - مطلوب.

هذا هو السبب في تعطش مستخدمي WordPress مثلي ، يكاد يكون من الصعب تصديق أنه في عام 2018 ربما لا يزال شخص ما يشغل موقع ويب HTML ثابتًا بدلاً من موقع ويب WordPress به سمة ومكونات إضافية. ولكن الحقيقة هي أنه لا يزال هناك قدر كبير من مواقع HTML النشطة فقط. (أو HTML مع القليل من CSS.)

منحت ، قد يكون لدى مالكي المواقع هؤلاء أسباب وجيهة لعدم الترقية أو التحويل. ربما لا يتغير محتوى موقعهم أبدًا ويكون التنسيق والتصميم البسيط الموجود بالفعل قابلاً للخدمة؟ أو ربما يكون الأمر أقل صعوبة من القلق بشأن تحديث موقع WordPress؟ كلاهما أسباب وجيهة (من بين أمور أخرى). أمثلة رئيسية على "لا تقم بإصلاح ما لم يتم كسره".

ومع ذلك ، لدي شعور بأن هذه قد لا تكون السبب الرئيسي لبعض (ربما الكثير) لم يقم بهذه القفزة. الأمر الأكثر وضوحًا هو أنهم ببساطة لا يعرفون كيفية تحويل موقع HTML الخاص بهم إلى موقع WordPress. خاصةً دون فقد المحتوى أو الحاجة إلى إجراء تنسيق مفرط على أساس صفحة بصفحة.

لحسن الحظ ، كما هو الحال غالبًا مع WordPress ، هناك عدد من الطرق لحل هذه المشكلة. لقد جمعت بعض الخيارات أدناه.

اشترك في قناتنا على اليوتيوب

خياراتك لتحويل موقع HTML ثابت إلى موقع WordPress

كيف تختار تحويل موقع HTML الثابت الخاص بك إلى موقع WordPress سيعتمد بلا شك على تفضيلاتك الشخصية ، والوقت / الاستثمار النقدي المطلوب ، ومستوى المهارة مع الكود. يجب أن تكون الشخص الذي يقرر ما هو الأفضل بالنسبة لك ، ولكن مع الملخصات أدناه ، يجب أن تكون قادرًا على اتخاذ قرار سريع والتخطي مباشرة إلى المعلومات الأكثر صلة في هذا المنشور بموقفك المحدد.

هناك ثلاثة خيارات رئيسية:

1. قم يدويًا بإنشاء سمة WordPress استنادًا إلى موقع HTML الثابت الحالي الخاص بك.

سيتطلب هذا منك إدخال التعليمات البرمجية الخاصة بك. سيتعين عليك الوصول إلى دليل الموقع الحالي الخاص بك عبر FTP واستخدام الكود الحالي الخاص بك كنقطة بداية. من هناك ، ستحتاج إلى إنشاء الملفات الضرورية لموضوع WordPress ونسخ أجزاء من التعليمات البرمجية من كودكس WordPress. هذا بسيط ومباشر إلى حد ما إذا كان لديك بعض الخبرة مع HTML و CSS وقليلًا من PHP.

2. قم بتثبيت سمة مُعدة مسبقًا وترحيل المحتوى الخاص بك.

ربما يكون هذا هو الخيار الأفضل عند تقاطع البساطة والقيمة. بافتراض أن لديك بالفعل استضافة لموقعك الحالي ، فستحتاج فقط إلى إنفاق الأموال إذا اخترت شراء سمة مميزة. المكوّن الإضافي الذي سنستخدمه لاستيراد المحتوى متاح مجانًا في مستودع WordPress Plugin الرسمي.

3. الدفع مقابل الحصول على خدمة تحويل HTML إلى WordPress لإعادة إنشاء موقعك.

هذا هو الحل الأسهل لأنه لا يتطلب منك فعل الكثير من أي شيء. ومع ذلك ، لن تفعل الكثير لتعريفك بـ WordPress وستختلف التكلفة حسب الشخص الذي تختار تعيينه. لن أغطي هذا الخيار في الأقسام أدناه لأنه إذا كان هذا هو المسار الذي تهتم به ، فيمكنك ببساطة إجراء بحث سريع عن موفري الخدمة وسيهتمون بالباقي.

التحضير لتحويل HTML إلى WordPress

بغض النظر عن الطريق الذي قررت أن تسلكه أدناه ، هناك بعض الأشياء التي تريد القيام بها قبل الغوص.

الأول هو اختيار خطة الاستضافة. سترغب في إلقاء نظرة على الخيارات المتاحة واتخاذ قرار بشأن الحزمة التي تناسب احتياجاتك على أفضل وجه. أو ربما ترغب في إنشاء تثبيت WordPress محلي بدلاً من ذلك؟ يمكنك دائمًا ترحيلها إلى خدمة استضافة لاحقًا.

بمجرد اختيارك ، ستحتاج إلى تثبيت WordPress وتسجيل الدخول إلى WP Admin. هذه هي النقطة التي ينقسم عندها المساران المحتملان.

تحويل موقع HTML الثابت الخاص بك يدويًا إلى WordPress

إذا كان هدفك ليس فقط الحصول على المحتوى الخاص بك من موقع HTML الثابت الخاص بك إلى WordPress ولكن أيضًا تكرار تصميمك الحالي ، فهذا يعني أنك ستحتاج إلى إنشاء المظهر المخصص الخاص بك. لحسن الحظ ، هذا ليس مخيفًا كما قد يبدو في البداية. إنه يتضمن فقط إنشاء عدد قليل من المجلدات والملفات ، وقليل من النسخ واللصق ، ثم تحميل النتيجة.

ستحتاج إلى محرر كود مثل Sublime أو Notepad ++ والوصول إلى كل من دليل موقع HTML ودليل تثبيت WordPress الجديد.

الخطوة 1: قم بإنشاء مجلد موضوع جديد والملفات الضرورية

على سطح المكتب الخاص بك ، قم بإنشاء مجلد جديد للاحتفاظ بملفات السمات الخاصة بك. قم بتسمية ما تريد أن يتم تسمية المظهر الخاص بك.

بعد ذلك ، قم بإنشاء بعض الملفات (والتي يتم وضعها جميعًا في مجلد النسق الجديد) في محرر التعليمات البرمجية الخاص بك. لا تفعل أي شيء لهم الآن. فقط اتركهم مفتوحين لمزيد من التحرير.

• Style.css
• Index.php
• header.php
• الشريط الجانبي. php
• تذييل. php

الخطوة 2: انسخ CSS الموجودة إلى ورقة أنماط جديدة

إذا كنت تبحث عن تكرار تصميم ، فربما يعني هذا أن لديك على الأقل بعض CSS التي تريد حفظها. لذا فإن الملف الأول الذي تريد تحريره هو ملف Style.css الخاص بك.

للبدء ، أضف ما يلي إلى أعلى الملف الخاص بك.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

بعد هذا القسم ، قم ببساطة بلصق CSS الموجود أدناه. أحفظ وأغلق الملف.

الخطوة 3: افصل HTML الحالي

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

لذلك عندما أقول إننا سنقوم "بتقطيع" HTML الموجود لديك ، فإن ما نقوم به في الواقع هو ببساطة قص ولصق أجزاء من التعليمات البرمجية الموجودة في الملفات المختلفة التي أنشأناها للتو ، حتى يعرف WordPress مكان العرض معهم.

ها نحن ذا.

أولاً ، افتح ملف index.html لموقعك الحالي. قم بتمييز كل شيء من أعلى الملف إلى علامة div class = ”main” الافتتاحية. انسخ والصق هذا القسم في ملف header.php واحفظه وأغلقه.

ثانيًا ، ارجع إلى ملف index.html الخاص بك. قم بتمييز عنصر class = ”sidebar” الجانبي وكل شيء بداخله. انسخ والصق هذا القسم في ملف sidebar.php واحفظه وأغلقه.

ثالثًا ، في index.html ، حدد كل شيء بعد الشريط الجانبي وانسخه والصقه في ملف footer.php ، واحفظه وأغلقه.

أخيرًا ، في ملف index.html ، حدد كل ما تبقى (يجب أن يكون هذا هو قسم المحتوى الرئيسي) والصقه في ملف index.php . احفظ ، لكن لا تغلق بعد.

يمكنك إغلاق ملف index.html وبك الآن ولكن والانتقال إلى الخطوات النهائية. يكاد ينتهي!

الخطوة 4: قم بإنهاء ملف Index.php الخاص بك

من أجل وضع اللمسات الأخيرة على ملف index.php الخاص بالقالب الجديد ، تحتاج إلى التأكد من أنه يمكنه استدعاء القسم الآخر (إلى جانب المحتوى الرئيسي) الموجود في الملفات الأخرى التي قمت بإنشائها. أو بعبارة أخرى ، أعد تجميع العناصر التي "قمنا بتقطيعها" للتو.

في أعلى ملف index.php ، ضع السطر التالي من ملف php.

<?php get_header(); ?>

ثم ، في الجزء السفلي من ملف index.php الخاص بك ، ضع هذه الأسطر من php.

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

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

<?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 الخاص بك وأغلقه. لقد انتهى المظهر الآن! كل ما تبقى هو تحميله على موقع WordPress الخاص بك.

الخطوة 5: قم بتحميل المظهر الجديد الخاص بك

الآن بعد أن أنشأت ملفات السمات الخاصة بك وقمت بتخزينها جميعًا في مجلد السمات الجديد ، ستحتاج إلى الوصول إلى دليل تثبيت WordPress الجديد.

ضع مجلد النسق الجديد داخل / wp-content / theme / . ثم انتقل مرة أخرى إلى WP Admin> Appearance> Themes ويجب أن يظهر المظهر الذي تم إنشاؤه حديثًا هناك. انطلق وقم بتنشيطها!

كل ما تبقى للقيام به في هذه المرحلة هو ملء موقع WordPress الجديد الخاص بك بمحتوى موقعك القديم. تابع مع القسم أدناه (تخطي الجزء الخاص باستخدام سمة مسبقة الصنع) لمعرفة كيفية القيام بذلك.

استخدام سمة WordPress مسبقة الصنع واستيراد محتوى HTML

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

هناك مواضيع مجانية وهناك مواضيع متميزة. قبل أن تقرر ما هو الأفضل بالنسبة لك ، قد ترغب في قراءة السمات المصممة لتلبية احتياجاتك والتصفح حسب فئة السمة هنا في Elegant Themes وفي أي مكان آخر.

بمجرد اختيار السمة التي تريدها (وتنزيل حزمة الملفات المضغوطة الخاصة بها) ، سترغب في العودة إلى WP Admin> Appearance> Themes> Add New وتثبيت / تنشيط سمة WordPress الجديدة.

بمجرد الانتهاء من ذلك ، سيكون لديك موقع ويب WordPress جديد وموضوع - ولكن القليل آخر. عند معاينة موقعك ، سيكون خاليًا من المحتوى وربما يبدو مملاً نوعًا ما. هذا جيد ، لأننا سنقوم بعد ذلك باستيراد محتوى موقعك القديم.

في WP Admin ، انتقل إلى Plugins> Add New وابحث عن مكون إضافي يسمى HTML Import 2 بواسطة Stephanie Leary. بمجرد تثبيت هذا المكون الإضافي وتنشيطه ، اتبع دليل المستخدم المفيد الخاص به لاستيراد دليل صفحات HTML بالكامل. مع استكمال الصور!

بعد ذلك ، سيكون لديك كل المحتوى القديم الخاص بك على WordPress ويتم تنسيقه حسب المظهر الجديد الخاص بك. أو ، إذا قمت بإنشاء المظهر الخاص بك أعلاه ، يجب أن يبدو موقعك إلى حد كبير كما كان من قبل - يعمل فقط على WordPress.

ختاما

إذا كنت قد استخدمت هذا المنشور كدليل لترحيل موقع الويب الخاص بك إلى WordPress ، فقد انضممت للتو إلى واحدة من أكبر المجتمعات مفتوحة المصدر في العالم. أهلا بك! إنه مكان ممتع مع الكثير من المطورين ، والمصممين ، والمدونين ، و DIYers ، وأكثر من ذلك - كلهم ​​يبنيون ويلعبون ويخلقون باستخدام قوالب / إضافات WordPress و WordPress.

إذا كنت قد "اكتشفت خطأ WordPress" ، فإن موقع WordPress.org الرسمي مليء بالسمات والإضافات والموارد الأخرى المفيدة. إذا كنت ترغب في إجراء المزيد من التعديلات على ملفات السمات الخاصة بك ، فاستكشف Codex للحصول على نصائح وحيل وأشكال لا نهاية لها على ما يبدو.

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

الصورة المصغرة للمقال عبر Max Griboedov / shutterstock.com