SHET35

تبدیل قالب HTML به قالب وردپرس بصورت قدم به قدم

تبدیل قالب HTML به قالب وردپرس بصورت قدم به قدم

تبدیل قالب HTML به وردپرس یعنی ظاهر سایت استاتیکتون رو به قالبی تبدیل کنید که بتونید عنوان‌ها، نوشته‌ها، برگه‌ها، منوها و بخش‌های مختلفش رو از پیشخوان مدیریت کنید. برای این کار دو مسیر اصلی دارید: ساخت قالب بلوکی با ویرایشگر سایت وردپرس یا ساخت قالب کلاسیک با فایل‌های PHP. اگه هم نمی‌خواید طراحی قبلی رو نگه دارید، می‌تونید فقط محتوا رو به یک قالب آماده منتقل کنید.

در این راهنما هر سه مسیر رو کنار هم بررسی می‌کنیم تا راحت‌تر انتخاب کنید. بعد قدم‌به‌قدم سراغ ساخت فایل‌های قالب، انتقال محتوا، حفظ آدرس‌ها و سئو، نصب قالب و آزمایش نهایی می‌ریم. برای شروع باید کمی HTML و CSS بلد باشید. در مسیر کلاسیک هم به آشنایی پایه با PHP نیاز دارید. یادتون نره همه تغییرها رو اول در یک محیط آزمایشی انجام بدید، نه روی سایت اصلی.

آنچه در این مقاله می‌خوانید

قبل از تبدیل قالب HTML به وردپرس چه چیزهایی رو آماده کنید؟

قبل از اینکه سراغ کدها برید، چند چیز رو آماده کنید. این کار کمک می‌کنه وسط مسیر با فایل گم‌شده، لینک خراب یا سایتی که از دسترس خارج شده روبه‌رو نشید:

  • نسخه پشتیبان: از همه فایل‌های HTML، تصاویر، فونت‌ها و اطلاعات فعلی یک نسخه پشتیبان بگیرید. اگه سایتتون پایگاه داده داره، از اون هم خروجی بگیرید.
  • محیط آزمایشی: یک نسخه جدا روی لوکال‌هاست، زیردامنه یا هاست آزمایشی بسازید. محیط آزمایشی جاییه که می‌تونید تغییرها رو بدون آسیب‌زدن به سایت اصلی امتحان کنید.
  • وردپرس و ویرایشگر کد: وردپرس رو نصب کنید و یک ویرایشگر کد مثل Visual Studio Code در دسترس داشته باشید.
  • فهرست فایل‌ها: ساختار HTML، فایل‌های CSS و JavaScript، فونت‌ها، تصاویر و وابستگی‌های خارجی رو پیدا و دسته‌بندی کنید.
  • نقشه بخش‌های سایت: مشخص کنید کدوم قسمت‌ها ثابت می‌مونن و کدوم محتوا باید از پیشخوان تغییر کنه. هدر، فوتر، منو، نوشته‌ها، برگه‌ها و سایدبار معمولاً باید قابل مدیریت باشن.

همین اول یک جدول از آدرس صفحه‌های فعلی هم درست کنید. این جدول موقع انتقال محتوا و ساخت ریدایرکت‌ها کمکتون می‌کنه بازدیدکننده‌ها به صفحه اشتباهی نرن.

کدوم روش تبدیل قالب HTML به وردپرس برای شما مناسبه؟

تبدیل HTML به قالب بلوکی وردپرس

قالب بلوکی با بلوک‌ها، فایل‌های HTML مخصوص وردپرس و فایل theme.json ساخته می‌شه. بعد از آماده‌شدن قالب می‌تونید هدر، فوتر و قالب صفحه‌ها رو از بخش «نمایش ← ویرایشگر» تغییر بدید. این مسیر برای پروژه‌های جدید و سایت‌هایی که ویرایش بصری براشون مهمه، انتخاب خوبیه.

تبدیل HTML به قالب کلاسیک وردپرس

در قالب کلاسیک، ساختار HTML بین فایل‌هایی مثل header.php، index.php و footer.php تقسیم می‌شه. این روش برای طرح‌هایی مناسبه که منطق PHP اختصاصی دارن یا باید با ساختار یک قالب کلاسیک هماهنگ بشن.

انتقال محتوا به یک قالب آماده بدون حفظ طراحی قبلی

اگه فقط نوشته‌ها و صفحه‌های قدیمی براتون مهم هستن، لازم نیست قالب HTML رو تبدیل کنید. می‌تونید یک قالب مناسب نصب کنید، محتوا رو انتقال بدید و صفحه‌ها رو از نو بچینید. برای طراحی بصری هم می‌تونید از یک صفحه‌ساز وردپرس کمک بگیرید.

مقایسه روش‌ها از نظر مهارت، زمان و امکان مدیریت سایت

روشمهارت لازمحفظ طراحی قبلیمدیریت از پیشخوان
قالب بلوکیHTML، CSS و ساختار بلوک‌هابله، با بازسازی طرحخیلی خوب
قالب کلاسیکHTML، CSS و PHPبلهخوب، بعد از پویاکردن بخش‌ها
قالب آمادهمهارت فنی کمترمعمولاً نهخیلی خوب

روش اول: تبدیل قالب HTML به قالب بلوکی وردپرس

قالب بلوکی چیه و چه فرقی با قالب کلاسیک داره؟

در قالب بلوکی، ساختار صفحه با بلوک‌های وردپرس داخل فایل‌های HTML ذخیره می‌شه. هدر و فوتر هم به‌صورت «بخش قالب» ساخته می‌شن. در قالب کلاسیک همین کار با فایل‌های PHP و توابع وردپرس انجام می‌شه. راهنمای رسمی ویرایشگر سایت وردپرس اجزایی رو معرفی می‌کنه که در یک قالب بلوکی قابل ویرایش هستن.

ساخت پوشه و فایل‌های اصلی قالب بلوکی

داخل مسیر wp-content/themes یک پوشه مثل my-html-theme بسازید. بعد حداقل فایل‌ها و پوشه‌های زیر رو داخلش قرار بدید:

  • style.css: مشخصات قالب و استایل‌های تکمیلی داخل این فایل قرار می‌گیرن.
  • theme.json: رنگ‌ها، تایپوگرافی، فاصله‌ها و تنظیمات کلی ویرایشگر رو کنترل می‌کنه.
  • templates/index.html: قالب پیش‌فرض نمایش محتواست.
  • parts: بخش‌هایی مثل هدر و فوتر داخل این پوشه قرار می‌گیرن.
/*
Theme Name: My HTML Theme
Author: Your Name
Version: 1.0.0
Text Domain: my-html-theme
*/

نمونه زیر یک theme.json خیلی ساده‌ست. قبل از استفاده نهایی، رنگ‌ها و اندازه‌ها رو با طراحی سایتتون هماهنگ کنید.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#2563eb", "name": "Primary" },
        { "slug": "background", "color": "#ffffff", "name": "Background" }
      ]
    },
    "layout": {
      "contentSize": "760px",
      "wideSize": "1200px"
    }
  }
}

تبدیل هدر و فوتر HTML به بخش‌های قالب

ظاهر هدر رو با بلوک‌های معادل مثل «لوگوی سایت»، «عنوان سایت» و «پیمایش» بازسازی کنید و نتیجه رو داخل parts/header.html بذارید. فوتر هم داخل parts/footer.html قرار می‌گیره. بعد این دو بخش رو در فایل‌های قالب فراخوانی کنید.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

ساخت قالب صفحه اصلی، نوشته و برگه

برای صفحه اصلی فایل front-page.html، برای نوشته تکی single.html و برای برگه page.html بسازید. بلوک‌های «عنوان نوشته»، «محتوای نوشته»، «تصویر شاخص» و «تاریخ نوشته» اطلاعات واقعی وردپرس رو نمایش می‌دن. برای چیدمان صفحه اصلی هم راهنمای ساخت صفحه اصلی سفارشی در وردپرس به‌دردتون می‌خوره.

تبدیل منوی HTML به بلوک Navigation

فهرست ثابت ul و li رو با بلوک Navigation یا همون «پیمایش» جایگزین کنید. بعد از فعال‌کردن قالب، از «نمایش ← ویرایشگر» وارد هدر بشید و لینک‌ها رو انتخاب کنید. از این به بعد برای تغییر منو لازم نیست فایل‌های قالب رو ویرایش کنید.

مدیریت رنگ‌ها، فونت‌ها و فاصله‌ها با theme.json

رنگ‌های اصلی، عرض محتوا، اندازه فونت و فاصله‌ها رو در theme.json تعریف کنید. با این کار تنظیمات قالب و ویرایشگر هماهنگ می‌مونن. اگه از فونت محلی استفاده می‌کنید، فایل فونت و مجوز استفاده از اون رو هم بررسی کنید.

ویرایش قالب با بخش نمایش و ویرایشگر وردپرس

بعد از فعال‌سازی قالب بلوکی، به «نمایش ← ویرایشگر» برید. اینجا می‌تونید قالب‌ها، بخش‌های قالب و سبک‌ها رو تغییر بدید. یادتون نره بعضی تغییرهایی که در ویرایشگر ذخیره می‌کنید داخل پایگاه داده می‌مونن و ممکنه نسخه فایل رو بپوشونن. پس خروجی نهایی رو در یک نصب تازه هم آزمایش کنید.

روش دوم: تبدیل HTML به قالب کلاسیک وردپرس

ساخت پوشه قالب و فایل‌های ضروری

داخل wp-content/themes یک پوشه برای قالب بسازید. فایل‌های پایه معمولاً این‌ها هستن:

  • style.css برای مشخصات و استایل قالب
  • index.php به‌عنوان قالب پیش‌فرض
  • functions.php برای ثبت امکانات و فایل‌های CSS و JavaScript
  • header.php و footer.php برای هدر و فوتر
  • sidebar.php، page.php و single.php برای سایدبار، برگه و نوشته

تقسیم فایل HTML بین بخش‌های قالب

انتقال هدر به header.php

کد رو از ابتدای سند تا شروع محتوای اصلی داخل header.php بذارید. عنوان ثابت صفحه و تگ‌های متای تکراری رو حذف کنید تا وردپرس و افزونه سئو اون‌ها رو مدیریت کنن.

انتقال فوتر به footer.php

کد فوتر تا پایان سند داخل footer.php قرار می‌گیره. فراخوانی wp_footer() باید قبل از بسته‌شدن body قرار بگیره.

انتقال سایدبار به sidebar.php

اگه طرح HTML سایدبار داره، ساختارش رو داخل sidebar.php بذارید. کمی جلوتر محتوای ثابت این قسمت رو به یک ناحیه ابزارک پویا تبدیل می‌کنیم.

اضافه‌کردن توابع ضروری وردپرس به ساختار HTML

توابع زیر به وردپرس و افزونه‌ها اجازه می‌دن اطلاعات زبان، کلاس‌های صفحه و کدهای ضروری رو درست اضافه کنن:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

داخل footer.php هم این بخش رو نگه دارید:

<?php wp_footer(); ?>
</body>
</html>

بارگذاری استاندارد فایل‌های CSS و JavaScript

ثبت فایل‌ها با wp_enqueue_style و wp_enqueue_script

فایل CSS یا JavaScript رو با تگ ثابت داخل هدر وارد نکنید. وردپرس برای این کار توابع استانداردی داره که وابستگی‌ها و ترتیب بارگذاری رو مدیریت می‌کنن. راهنمای رسمی بارگذاری فایل‌های قالب وردپرس جزئیات این روش رو توضیح می‌ده.

<?php
function my_html_theme_assets() {
    wp_enqueue_style(
        'my-html-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );

    wp_enqueue_script(
        'my-html-theme-script',
        get_template_directory_uri() . '/assets/js/main.js',
        array(),
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_html_theme_assets' );

اصلاح مسیر فونت‌ها، تصاویر و فایل‌های داخلی قالب

مسیر نسبی مثل images/logo.svg ممکنه در صفحه‌های داخلی خراب بشه. برای فایلی که داخل قالب قرار داره از get_theme_file_uri() استفاده کنید و خروجی URL رو هم ایمن کنید:

<img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/logo.svg' ) ); ?>" alt="<?php esc_attr_e( 'لوگوی سایت', 'my-html-theme' ); ?>">

تبدیل محتوای ثابت به حلقه وردپرس

حلقه وردپرس یا The Loop بخشی از کده که نوشته یا برگه درخواستی رو می‌گیره و نمایش می‌ده. ساختار پایه اون به این شکله:

<?php get_header(); ?>

<main id="primary">
<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h1><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
<?php else : ?>
    <p><?php esc_html_e( 'محتوایی پیدا نشد.', 'my-html-theme' ); ?></p>
<?php endif; ?>
</main>

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

ساخت فایل‌های جدا برای نوشته‌ها، برگه‌ها و بایگانی

کد عمومی رو اول در index.php کامل کنید. بعد برای کنترل دقیق‌تر، نسخه مناسبش رو در single.php، page.php و archive.php بذارید. برای تکه‌های تکراری هم می‌تونید پوشه template-parts بسازید.

تبدیل منوی ثابت HTML به فهرست قابل مدیریت

اول جایگاه فهرست رو در functions.php ثبت کنید:

register_nav_menus(
    array(
        'primary' => __( 'فهرست اصلی', 'my-html-theme' ),
    )
);

بعد فهرست ثابت هدر رو با این کد جایگزین کنید:

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'container'      => 'nav',
        'container_class' => 'main-navigation',
        'fallback_cb'    => false,
    )
);
?>

حالا مدیر سایت می‌تونه لینک‌های منو رو از پیشخوان تغییر بده. محل دقیق تنظیم فهرست به نوع قالب و نسخه رابط مدیریت بستگی داره.

تبدیل سایدبار ثابت به بخش قابل مدیریت

ناحیه ابزارک رو در functions.php ثبت کنید:

function my_html_theme_widgets() {
    register_sidebar(
        array(
            'name'          => __( 'سایدبار اصلی', 'my-html-theme' ),
            'id'            => 'sidebar-1',
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_html_theme_widgets' );

داخل sidebar.php هم خروجی پویا رو نمایش بدید:

<aside class="sidebar">
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    <?php endif; ?>
</aside>

اضافه‌کردن امکانات پایه قالب

پشتیبانی از تصویر شاخص، عنوان خودکار، لوگوی سفارشی، HTML5 و ترجمه رو در تابع راه‌اندازی قالب فعال کنید:

function my_html_theme_setup() {
    load_theme_textdomain( 'my-html-theme', get_template_directory() . '/languages' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support(
        'html5',
        array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' )
    );
}
add_action( 'after_setup_theme', 'my_html_theme_setup' );

اگه با توابع وردپرس آشنا نیستید، راهنمای توابع پرکاربرد وردپرس معنی و کاربرد اون‌ها رو ساده‌تر توضیح می‌ده.

ایمن‌سازی خروجی‌ها و ورودی‌های قالب

اطلاعاتی که داخل HTML چاپ می‌شن باید با تابع مناسب ایمن بشن. برای متن از esc_html()، برای ویژگی‌های HTML از esc_attr() و برای آدرس‌ها از esc_url() استفاده کنید. داده‌های ورودی رو هم قبل از ذخیره پاک‌سازی کنید. تابع مناسب به نوع داده و جایی که از اون استفاده می‌کنید بستگی داره.

انتقال محتوای سایت HTML به وردپرس

انتقال دستی برای سایت‌های کوچک

برای یک سایت چندصفحه‌ای، راه ساده و قابل‌کنترل اینه که برگه‌ها یا نوشته‌ها رو بسازید و عنوان، متن و تصویرها رو دستی انتقال بدید. موقع کپی، کدهای اضافی و استایل‌های درون‌خطی رو وارد نکنید. تصویرها رو هم در کتابخانه رسانه وردپرس بارگذاری کنید تا آدرس و اندازه اون‌ها درست مدیریت بشه.

انتقال گروهی با اسکریپت اختصاصی یا WP-CLI

برای صدها صفحه، انتقال دستی منطقی نیست. می‌تونید یک اسکریپت اختصاصی بسازید که HTML رو بخونه و داده‌ها رو با توابع وردپرس وارد کنه. WP-CLI هم رابط خط فرمان وردپرسه؛ یعنی به‌جای کلیک‌کردن در پیشخوان، دستورهایی برای مدیریت محتوا اجرا می‌کنید. راهنمای استفاده از WP-CLI شروع کار رو نشون می‌ده.

قبل از اجرای گروهی، اسکریپت رو فقط روی چند صفحه امتحان کنید. نگاشت عنوان، نامک، نوع محتوا، تاریخ، نویسنده، تصویر شاخص و اطلاعات سئو باید از قبل مشخص باشه. نتیجه انتقال اختصاصی بدون دیدن ساختار فایل‌های منبع قابل تضمین نیست و باید با نمونه‌های واقعی آزمایش بشه.

چه زمانی بهتره انتقال محتوا رو به توسعه‌دهنده بسپارید؟

اگه تعداد صفحه‌ها زیاده، فایل‌های HTML ساختار یکسانی ندارن یا با داده ساخت‌یافته و چند زبان سروکار دارید، بهتره از توسعه‌دهنده کمک بگیرید. فرم‌ها، حساب کاربران، سفارش‌ها و داده‌های حساس فقط «محتوای HTML» نیستن و برای انتقالشون به طراحی و آزمایش جدا نیاز دارید.

انتقال عنوان‌ها، متن‌ها، تصاویر و اطلاعات سئو

برای هر صفحه، عنوان اصلی، محتوای قابل مشاهده، توضیح تصویر و اطلاعات سئو رو جدا کنید. عنوان سئو و توضیحات متا باید فقط یک‌بار تولید بشن. اگه اطلاعات قبلی داخل تگ‌های HTML قرار دارن، اون‌ها رو با فیلدهای افزونه سئوی جدید هماهنگ کنید.

حفظ تاریخ انتشار، نویسنده، دسته‌بندی و آدرس نوشته‌ها

تاریخ و نویسنده روی ترتیب نمایش محتوا در بایگانی اثر می‌ذارن، پس موقع انتقال اون‌ها رو نادیده نگیرید. دسته‌بندی‌ها رو قبل از انتقال بسازید و هر محتوا رو به دسته درست وصل کنید. برای حفظ آدرس هم نامک قبلی رو ثبت کنید؛ نامک در وردپرس همون بخش قابل خواندن انتهای URL هست.

حفظ آدرس‌ها و سئوی سایت هنگام انتقال

ثبت ساختار فعلی URLها قبل از جابه‌جایی

همه آدرس‌های فعلی رو قبل از انتقال فهرست کنید. کنار هر URL قدیمی، آدرس مقصدش در وردپرس رو بنویسید. تا جایی که می‌تونید همون ساختار قبلی رو نگه دارید تا به ریدایرکت کمتری نیاز داشته باشید.

ساخت ریدایرکت ۳۰۱ برای آدرس‌های تغییرکرده

ریدایرکت ۳۰۱ یعنی یک آدرس قدیمی به‌صورت دائمی به مقصد جدید فرستاده بشه. هر URL قدیمی باید مستقیم به مرتبط‌ترین صفحه جدید بره؛ همه آدرس‌ها رو به صفحه اصلی نفرستید. بعد از اجرا هم کد وضعیت و مقصد نهایی رو بررسی کنید.

جلوگیری از عنوان و توضیحات متای تکراری

تگ عنوان و توضیحات متای ثابت رو از header.php حذف کنید. وردپرس و افزونه سئو باید برای هر صفحه خروجی مناسب بسازن. اگه متای قدیمی و خروجی افزونه هم‌زمان باقی بمونن، ممکنه تگ‌های تکراری ساخته بشن.

بررسی لینک‌های داخلی، کنونیکال و نقشه سایت

لینک‌های داخل متن و منو رو به آدرس نهایی تغییر بدید. تگ کنونیکال آدرس اصلی هر محتوا رو به موتور جستجو معرفی می‌کنه و باید به نسخه درست اشاره کنه. نقشه سایت جدید رو هم بررسی کنید و در ابزارهای موتور جستجو ثبتش کنید. برای جزئیات بیشتر، راهنمای سئو تکنیکال وردپرس رو ببینید.

پیداکردن خطاهای ۴۰۴ بعد از انتقال

خطای ۴۰۴ یعنی سرور صفحه درخواستی رو پیدا نکرده. آدرس‌های قدیمی، لینک‌های داخلی، فایل‌های CSS و JavaScript و تصویرها رو بررسی کنید. هر خطای واقعی باید با اصلاح لینک یا یک ریدایرکت مرتبط برطرف بشه.

بسته‌بندی، نصب و فعال‌کردن قالب وردپرس

بررسی ساختار نهایی پوشه قالب

قبل از فشرده‌سازی، مطمئن بشید فایل style.css در ریشه پوشه قالبه و یک پوشه اضافه دور فایل‌ها ساخته نشده. نام فایل‌ها و حروف بزرگ و کوچیک اون‌ها رو هم بررسی کنید؛ سرورهای لینوکسی بین این حروف تفاوت می‌ذارن.

ساخت فایل ZIP و نصب از پیشخوان

خود پوشه قالب رو به فایل ZIP تبدیل کنید. بعد در پیشخوان به «نمایش ← پوسته‌ها ← افزودن پوسته تازه ← بارگذاری پوسته» برید، فایل رو انتخاب کنید و روی نصب بزنید.

آپلود قالب در وردپرس
آپلود قالب در وردپرس

فعال‌سازی قالب در محیط آزمایشی

قالب رو اول در محیط آزمایشی فعال کنید. قبل از فعال‌سازی روی سایت اصلی، از پایگاه داده و فایل‌های سایت مقصد نسخه پشتیبان بگیرید و یک راه مشخص برای برگشت داشته باشید.

رفع خطاهای رایج بعد از فعال‌سازی

اگه قالب نصب نمی‌شه، جای style.css و هدر مشخصاتش رو بررسی کنید. برای خطای PHP، گزارش خطای محیط آزمایشی و فایل لاگ رو ببینید. پیام خطا، نام فایل و شماره خط معمولاً سرنخ خوبی برای پیداکردن مشکل بهتون می‌دن.

آزمایش کامل سایت بعد از تبدیل

  • ظاهر سایت رو در موبایل، تبلت و دسکتاپ بررسی کنید.
  • منوها، فرم‌ها، جستجو و همه لینک‌های مهم رو آزمایش کنید.
  • بارگذاری تصاویر، فونت‌ها و فایل‌های JavaScript رو بررسی کنید.
  • نوشته‌ها، برگه‌ها، دسته‌بندی‌ها، نتایج جستجو و صفحه ۴۰۴ رو ببینید.
  • سرعت، دسترس‌پذیری با صفحه‌کلید و خطاهای PHP رو آزمایش کنید.
  • قالب رو با نسخه‌های فعلی وردپرس و نسخه PHP پشتیبانی‌شده هاستتون آزمایش کنید.

برای بررسی سرعت فقط به ظاهر سبک قالب اعتماد نکنید. درخواست‌های شبکه، حجم تصویرها و اجرای JavaScript رو اندازه بگیرید. راهنمای دلیل کندبودن سایت وردپرسی یک برنامه عملی برای پیداکردن گلوگاه‌ها داره.

مشکلات رایج در تبدیل قالب HTML به وردپرس

چرا فایل CSS یا JavaScript بارگذاری نمی‌شه؟

معمولاً مسیر فایل اشتباهه، تابع بارگذاری اجرا نشده یا نام فایل با حروف واقعی اون فرق داره. تب Network مرورگر رو باز کنید، وضعیت درخواست رو ببینید و مطمئن بشید فایل‌ها با هوک wp_enqueue_scripts ثبت شدن.

چرا تصاویر بعد از تبدیل نمایش داده نمی‌شن؟

مسیر نسبی تصویر در صفحه‌های داخلی ممکنه به جای اشتباهی اشاره کنه. برای تصویرهای خود قالب از تابع مسیر قالب استفاده کنید. تصویرهای محتوایی رو هم داخل کتابخانه رسانه وارد کنید و آدرس قبلی اون‌ها رو بی‌دلیل نگه ندارید.

چرا منو از پیشخوان قابل ویرایش نیست؟

در قالب کلاسیک احتمالاً فهرست هنوز به‌صورت HTML ثابته یا جایگاهش ثبت نشده. در قالب بلوکی هم باید از بلوک پیمایش داخل هدر استفاده کنید.

چرا نوشته‌ها داخل قالب نمایش داده نمی‌شن؟

فایل قالب کلاسیک باید حلقه وردپرس و تابع the_content() رو داشته باشه. در قالب بلوکی هم فایل مربوط باید بلوک «محتوای نوشته» رو فراخوانی کنه. اگه فقط متن ثابت HTML گذاشته باشید، وردپرس جایی برای نمایش محتوای پیشخوان نداره.

چرا بعد از فعال‌سازی قالب صفحه سفید می‌بینید؟

صفحه سفید معمولاً با یک خطای PHP، کمبود حافظه یا خروجی ناقص همراهه. قالب قبلی رو دوباره فعال کنید، گزارش خطا رو در محیط آزمایشی ببینید و خط اعلام‌شده رو اصلاح کنید. نمایش جزئیات خطا روی سایت عمومی امن نیست.

چرا ظاهر سایت در صفحه‌های داخلی به هم می‌ریزه؟

این مشکل بیشتر از مسیرهای نسبی، بسته‌نشدن تگ‌ها یا CSS وابسته به ساختار صفحه اصلی میاد. HTML خروجی صفحه داخلی رو اعتبارسنجی کنید و مسیر همه فایل‌ها رو طوری بسازید که به URL صفحه وابسته نباشن.

چک‌لیست نهایی تبدیل قالب HTML به وردپرس

  1. از فایل‌ها و داده‌ها نسخه پشتیبان بگیرید و محیط آزمایشی بسازید.
  2. بین قالب بلوکی، قالب کلاسیک یا انتقال به قالب آماده انتخاب کنید.
  3. ساختار قالب رو بسازید و CSS و JavaScript رو استاندارد بارگذاری کنید.
  4. محتوا، رسانه‌ها و اطلاعات سئو رو انتقال بدید و آدرس‌ها رو اصلاح کنید.
  5. ظاهر، امکانات، سرعت، دسترس‌پذیری، خطاها و سئو رو آزمایش کنید.
  6. بعد از تأیید نسخه آزمایشی و تهیه نسخه پشتیبان، تغییر رو روی سایت اصلی اجرا کنید.

اگه تازه شروع کردید، اول فقط یک صفحه ساده رو تبدیل کنید. وقتی هدر، فوتر، محتوا و فایل‌های جانبی اون درست کار کردن، همین الگو رو برای بقیه صفحه‌ها ادامه بدید. با این روش پیداکردن خطاها خیلی راحت‌تر می‌شه.

سؤال‌های متداول

آیا تبدیل قالب HTML به وردپرس بدون کدنویسی ممکنه؟

اگه می‌خواید طراحی قبلی دقیقاً حفظ بشه، معمولاً به HTML، CSS و بسته به روش به PHP یا ساختار قالب بلوکی نیاز دارید. ولی اگه حفظ طراحی مهم نیست، می‌تونید محتوا رو به یک قالب آماده منتقل کنید و بخش زیادی از کار رو بدون کدنویسی انجام بدید.

برای این کار قالب بلوکی بهتره یا قالب کلاسیک؟

برای پروژه جدیدی که ویرایش بصری هدر، فوتر و صفحه‌ها مهمه، قالب بلوکی معمولاً انتخاب راحت‌تریه. قالب کلاسیک برای طرح‌هایی مناسبه که منطق PHP اختصاصی دارن یا باید با ساختار کلاسیک هماهنگ بمونن.

آیا بعد از تبدیل، طراحی قبلی سایت حفظ می‌شه؟

بله، ولی باید HTML و CSS قبلی رو با ساختار قالب وردپرس هماهنگ کنید. بعضی بخش‌ها مثل منو، محتوا و سایدبار هم باید با بلوک‌ها یا توابع وردپرس پویا بشن.

چطور محتوای سایت HTML رو به وردپرس منتقل کنید؟

برای سایت کوچک می‌تونید محتوا و تصویرها رو دستی وارد کنید. برای سایت بزرگ‌تر بهتره از اسکریپت اختصاصی یا WP-CLI کمک بگیرید و اول انتقال رو روی چند صفحه در محیط آزمایشی بررسی کنید.

آیا تبدیل سایت به وردپرس روی سئو اثر می‌ذاره؟

اگه آدرس‌ها، ریدایرکت‌های ۳۰۱، عنوان‌ها، توضیحات متا، لینک‌های داخلی و محتوای اصلی درست منتقل نشن، رتبه و ورودی سایت ممکنه آسیب ببینه. حفظ ساختار URL و آزمایش خطاهای ۴۰۴ ریسک انتقال رو کمتر می‌کنه.

تبدیل قالب HTML به وردپرس چقدر زمان می‌بره؟

زمان دقیق به تعداد صفحه‌ها، پیچیدگی طراحی، نوع قالب و حجم محتوای قابل انتقال بستگی داره. یک سایت ساده چندصفحه‌ای با یک سایت بزرگ دارای فرم، کاربر و داده اختصاصی قابل مقایسه نیست؛ پس بدون بررسی پروژه نمی‌شه زمان دقیقی گفت.

نظر شما در این مورد چیه؟

  1. U411560۱۹ تیر ۱۴۰۵

    سلام عرض ارض ادب من سوالی داشتم می خواستم یک فایل زیپ که داخلش فایل های کد php هست میشه تبدیل به قالب وردپرس کنم

    • رضا راد۲۱ تیر ۱۴۰۵

      سلام کار راحتی نیست بستگی به ساختار اون فایل ها داره

  2. U335816۸ دی ۱۴۰۲

    سلام خسته نباشید برای تبدیل قالبی که دارای چند فایل html است باید چیکار کنیم

    • رضا راد۹ دی ۱۴۰۲

      سلام فرقی نداره به همین شکل باید اقدام بشه.

  3. U335816۶ دی ۱۴۰۲

    سلام خسته نباشید من توی فایلم هم style.css رو گذاشتم هم index.php ولی وردپرس این ارور میده این بسته نمی‌تواند نصب شود. شیوه‌نامهٔ style.css حاوی سربرگ معتبری برای پوسته نیست.
    باید چیکار کنم

    • رضا راد۶ دی ۱۴۰۲

      سلام سپاس. باید هدر های style.css رو اضافه کنید.

  4. U35882۱۷ اردیبهشت ۱۴۰۰

    سلام
    در این مقاله اشاره ی زیادی به پوشه شد
    مثلا کد را در پوشه x قرار می دهیم و ذخیره می کنیم
    منظورتون همون فایل بود؟

    • U35882۱۷ اردیبهشت ۱۴۰۰

      و اینکه این کد هایی که گفته شد ساختار کلی قالب وردپرس بودن؟

      • رضا راد۱۹ اردیبهشت ۱۴۰۰

        بله ساختار قالب بودن

    • رضا راد۱۹ اردیبهشت ۱۴۰۰

      درود بر شما بله اشتباه تایپی بود

  5. U35292۴ بهمن ۱۳۹۹

    سلام ،ببخشید من یک صفحه ورود کاربری با HTML , CSS طراحی کردم و الان باید چطور این طرحم رو وارد قالب سایت وردپرسی خودم کنم که بشه از این طرح در صفحه ورود کاربری ازش استفاده بشه . قالب سایت من Divi هستش و به صورت لوکال دارم طراحی میکنم ممنون میشم راهنمایی کنید و منابعی که لازم هستش برای یادگیری همچین پروژه ای به من معرفی کنید . در ضمن واقعا مطالب سایت میهن وردپرس خیلی واضح و خوب برای کسایی که مبتدی هستن مفید و ارزشمند هستش .با تشکر

    • رضا راد۴ بهمن ۱۳۹۹

      درود بر شما سپاس. شما باید با اصول برنامه نویسی وردپرس اشنا بشید، در واقع نباید طرح رو وارد قالب فعلی کنید بلکه باید قالب اختصاصی طراحی کنید. این مورد در دوره صفر تا صد طراحی سایت توضیح داده شده.

  6. U33851۲ دی ۱۳۹۹

    سلام
    ببخشید من یک مورد رو در اموزشتون متوجه نشدم در روش اول قالب ما فقط html و css هست و احتیاجی به داینامیک کردنش با کد های پی اچ پی نداره یعنی ما اگر یک قالب بدون کد های پی اچ پی طراحی کنیم خودش اون قالب و داینامیک میکنه و به حالت پی اچ پی درش میاره ؟

  7. U31185۳۰ آبان ۱۳۹۹

    سلام من الان سایتم یه لندینگ پیج داره و یه بلاگ باید برای هرکدوم جدا این کار رو انجام بدم؟

    • تیم پشتیبانیتیم پشتیبانی۱ آذر ۱۳۹۹

      با سلام
      بله میتونید جدا هم طراحی کنید اما پیشنهاد میکنیم برای لندیگ پیج از پلاگین های صحفه ساز استفاده کنید

  8. U30857۲۷ مهر ۱۳۹۹

    سلام
    میشه این قالب رو شما ویرایش بدین و تمام کارهاش رو بکنید هزینه بدیم براتون چون برنامه نویسی بلد نیستم

    • تیم پشتیبانیتیم پشتیبانی۲۷ مهر ۱۳۹۹

      باسلام
      خیر این خدمات رو ارائه نمیدیم در حال حاضر

  9. U29907۱۱ مرداد ۱۳۹۹

    درود بر شما و سپاس از مطالب خوب اين سايت.
    براي اينكه يك قالب جديد وردپرس بسازيم بايد از چه دوره اي استفاده كنيم و به چه زبانهايي مسلط باشيم؟

  10. U29038۱۶ تیر ۱۳۹۹

    سلام
    ممنون از محتوای خوبتون
    من برعکس این کار رو می خوام انجام بدم
    وبسایتم وردپرسیه و می خوام php کنمش، قالب آماده شده ولی برای انتقالش مشکل دارم. می خوام محصولاتم توی این قالب جدید قرار بگیره و سئو آسیب نبینه. ممنون میشم راهنمایی کنید

    • رضا راد۱۷ تیر ۱۳۹۹

      سلام ممنون از شما. دقیقا برعکس این کارها رو باید انجام بدید بصورت مهندسی معکوس

پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرس
پشتیبانپشتیبانپشتیبانپشتیبانپشتیبان
تیم میهن وردپرسخارج از ساعات کاری هستیم؛ دستیار هوش مصنوعی پاسخگوی شماست.هوش مصنوعی

در حال بارگذاری...

هر سوالی دارید بپرسید.پاسخگوی شما هستیم.