ساخت قالب وردپرس با html | آموزش تبدیل کد اچ تی ام ال به قالب wordpress

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

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

• سایت‌های مربوط به کسب‌وکارهای مختلف
• سایت‌های مربوط به تجارت الکترونیکی
• انجمن‌های گفتگو
• شبکه‌های اجتماعی
• سایت‌های ساخت رزومه و به اشتراک گذاری آن
• و…

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

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

• مجموعه آموزش طراحی سایت با HTML و CSS – کلیک کنید

در ادامه بیشتر با قالب وردپرس آشنا خواهید شد.

قالب وردپرس چیست؟

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

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

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

نحوه استفاده از قالب وردپرس

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

• ورود به حساب کاربری وردپرس
• رفتن به مسیر Appearance > Themes
• انتخاب گزینه Add New
• اننتخاب یک قالب یا Theme
• کلیک روی گزینه Download برای شروع فرآیند نصب قالب
• کلیک روی گزینه Activate

ممکن است بخواهید که قالب وردپرس را مطابق سلیقه خود بسازید. آیا راهی برای این کار وجود دارد؟ خوشبختانه جواب مثبت است!

آموزش ساخت قالب وردپرس با html

بسیاری از کسب‌وکارها، به اچ تی ام ال برای ساخت وبسایت خود بسنده می‌کنند. این وبسایت‌ها معمولاً به صورت ایستا یا static طراحی می‌شوند. بنابراین باید برای ایجاد حتی جزئی‌ترین تغییرات در سایت، کد اچ تی ام ال مربوطه را ویرایش کرد. اما شما می‌توانید به راحتی کد اچ تی ام خود را به یک قالب وردپرس تبدیل کنید. با انجام این کار، قالبی خواهید داشت که تمامی عناصر ایجاد شده توسط اچ تی ام ال را حفظ کرده و در عین حال انعطاف‌پذیری یک قالب وردپرس را نیز خواهد داشت.

اگر با مفاهیم اچ تی ام ال و وردپرس به اندازه کافی آشنایی دارید، این آموزش برای شما بسیار کاربردی خواهد بود. اگر تازه‌کار هستید، بهتر است مفاهیم این آموزش را روی یک سرور محلی مانند زمپ (XAMPP) و با استفاده از یک وبسایت آزمایشی اجرا کنید.

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

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

ابتدا نگاهی به اجزای اصلی قالب اچ تی ام ال یعنی header، footer و بدنه اصلی می‌اندازیم.

منظور از header، عنصر بالایی سایت است که در تصویر زیر مشاهده می‌کنید:

منظور از بدنه اصلی،‌ عنصری است که بین header و footer قرار می‌گیرد. در مثال ما، بدنه اصلی به صورت زیر است:

منظور از footer نیز، عنصر پایینی سایت است که در مثال ما به صورت زیر است:

در ادامه، به صورت گام به گام، ساخت قالب وردپرس با html را آموزش خواهیم داد.

قدم ۱:‌ فراهم کردن پیش نیازها

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

• مجموعه آموزش وردپرس — کلیک کنید

قدم ۲: ساخت پوشه ای برای قرار گرفتن فایل های مربوط به قالب وردپرس

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

برای این کار باید مسیر زیر را طی کنید:

XAMPP folder > htdocs > WordPress folder > wp-content > themes

در این پوشه، پوشه جدیدی را ساخته و نام دلخواه خود را روی آن بگذارید.

قدم ۳:‌ ایجاد فایل های پی اچ پی

پوشه‌ای که در قدم دوم ایجاد کردیم، فعلاً خالی است. برای این که قالب وردپرس خود را ایجاد کنید، باید فایل‌هایی را در این پوشه قرار دهید. برای این کار، باید پوشه قالب وردپرس خود را در یک نرم افزار ویرایشگر کد باز کنید. پیشنهاد ما به شما استفاده از ویرایشگر کد Visual Studio Code است.

در این پوشه، باید فایل‌های زیر را ایجاد کرده و آن‌ها را در ویرایشگر کد خود باز کنید:

• فایل css که حاوی جزئیات قالب و فایل‌های سی اس اس است
• فایل php که از محتوای اصلی سایت شما میزبانی می‌کند
• فایل php که عناصر header قالب شما را در بر دارد
• فایل php که عناصر footer قالب شما را در بر دارد
• فایل php که توابع قالب وردپرس شما را در بر دارد

قدم ۴: کپی کردن فایل های سی اس اس، جاوا اسکریپت و تصاویر از پوشه html به پوشه وردپرس

باید از پوشه مربوط به قالب اچ تی ام ال خود (که آن را قبل از شروع کار دانلود کرده‌اید)، پوشه assets را که شامل فایل‌های css، جاوا اسکریپت و همچینن پوشه تصاویر است را درون پوشه قالب وردپرس خود کپی کنید:

پس از کپی کردن، پوشه قالب وردپرس شما به شکل زیر خواهد بود:

قدم بعدی ساخت قالب وردپرس با html، فعالسازی قالب جدید است.

قدم ۵: فعالسازی قالب جدید وردپرس

حال که پوشه‌های ضروری را به پوشه قالب وردپرس خود اضافه کرده‌اید،‌ سایت خود را در یک مرورگر باز کرده و وارد حساب وردپرس خود شوید. به قسمت Appearance رفته و گزینه Themes را انتخاب کنید. مشاهده خواهید کرد که قالب جدید شما به این قسمت اضافه شده است:

این قالب، خالی به نظر می‌رسد. برای اضافه کردن عناصر مورد نیاز به قالب جدید، فایل style.css را که در قدم ۳ ایجاد کرده بودید، باز کنید. حال کد زیر را در این فایل کپی و پیست کنید:

/*

Theme Name: Farhan WordPress Theme

Author: Farhan

Description: Convert HTML to WordPress theme.

Version: 1.0

*/

برای اضافه کردن بنر (banner) به قالب خود، باید یک فایل یک تصویر را به پوشه قالب وردپرس اضافه کنید. اندازه این فایل باید ۸۰۰ در ۶۰۰ باشد. همچنین نام فایل تصویر را Screenshot گذاشته و آن را با فرمت png ذخیره کنید:

زمانی که فایل  screenshot.png را اضافه کردید، داشبورد مدیریت سایت وردپرس را رفرش (refresh) کنید. حال می‌توانید تصویری که به پوشه قالب وردپرس اضافه کرده بودید را مشاهده کنید:

سپس با کلیک روی بنر،‌ می‌توانید اطلاعات مربوط به قالب را مشاهده کنید:

و در نهایت، تنها کاری که باید انجام دهید، کلکیک کردن روی گزینه Activate است.

قدم ۶:‌ تبدیل کد html به Header، Index و Footer

برای ساخت قالب وردپرس با html، باید header، footer و بدنه اصلی را مشخص کنید. در کد html، قسمت‌های مربوط به header، footer و بدنه اصلی با استفاده از کامنت (comment) مشخص شده‌اند. بنابراین به راحتی می‌توانید کد مربوط به این قسمت‌ها را مشخص کنید.

• آموزش راه اندازی سایت چند منظوره با وردپرس و انفلد Enfold — کلیک کنید

باید کد مربوط به قسمت header را از فایل index.html (موجود در پوشه قالب اچ تی ام الی که دانلود کرده بودید) را درون فایل header.php که در قدم ۳ ساخته‌اید، کپی کنید. برای این کار باید از قسمت <!DOCTYPE html> تا قسمت </header> را کپی کرده و آن را در فایل header.php پیست کنید و سپس فایل را ذخیره کنید.

به طور مشابه، باید کد مربوط به قسمت‌های بدنه اصلی و footer را از فایل index.html، به ترتیب در فایل‌های index.php و footer.php کپی کرده و آن فایل‌ها را ذخیره کنید.

برای footer، از قسمت <footer> تا </html> را کپی کرده و در فایل footer.php ذخیره کنید.

حال باید تمام کدی که پس از تگ </header> تا قبل از تگ <footer> وجود دارد را کپی کرده و در فایل index.php ذخیره کنید.

سپس باید تابع get_header() را به بالا و تابع get_footer() را به انتهای فایل index.php اضافه کنید. تابع get_header()، یک تابع از پیش تعریف شده است که فایل header.php را فرا می‌خواند. به طور مشابه، تابع get_footer() نیز وظیفه فراخوانی فایل footer.php را بر عهده دارد.

کد زیر را به ابتدای فایل index.php اضافه کرده و این فایل را ذخیره کنید:

 <?php get_header(); ?>

کد زیر را نیز به انتهای فایل index.php اضافه کرده و آن را ذخیره کنید:

<?php get_footer();

حال اگر سایت خود را دوباره بارگذاری کنید، با صحنه‌ای مانند زیر مواجه خواهید شد:

قدم ۷:‌ پیکربندی فایل css

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

در فایل header.php به دنبال عبارت rel=”stylesheet” بگردید:

سپس google stylesheet را که در تصویر بالا نیز مشخص شده است حذف کنید، چرا که به آن‌ها نیازی نخواهید داشت. حال تنها کاری که باید کنید،‌ مشخص کردن استایل شیت موردنیاز است. برای این کار باید کدی شبیه کد زیر بنویسید:

<link rel=”stylesheet” href=”assets/css/style-starter.css”>

وردپرس قادر به درک ساختار stylesheet نیست. برای رفع این مشکل، باید به فایل functions.php مراجعه کرده و تکه کد زیر را به آن اضافه کنید:

<?php

function add_css()

{

   wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style( 'first');

}

add_action('wp_enqueue_scripts', 'add_css');

حال می‌توانیم CSS stylesheet را از فایل header.php حذف کرده و کد زیر را با آن جایگزین کنیم:

<?php wp_head(); ?>

اگر سایت خود را مشاهده کنید، تغییرات اعمال شده را مشاهده خواهید کرد. اما هنوز هم استایل سایت شما نظم و ترتیب ندارد:

این به خاطر آن است که هنوز فایل جاوا اسکریپت خود را پیکربندی نکرده‌اید. در ادامه ساخت قالب وردپرس با html، باید فایل‌های جاوا اسکریپت را پیکربندی کنید.

قدم ۸: پیکربندی جاوا اسکریپت

قالب اچ تی ام الی که با آن کار می‌کنید، از جاوااسکریپت استفاده می‌کند. در فایل footer.php، فایل‌های جاوااسکریپت با فرمت اچ تی ام ال فراخوانی شده‌اند.

اما برای اجرای این فایل‌ها، باید مراحلی شبیه مراحلی که در قدم ۷ طی کردید را طی کنید. برای این کار در فایل footer.php به دنبال “<script src=“ بگردید.

این کار به شما کمک می‌کند تا تمامی فایل‌های جاوا اسکریپت موجود را پیدا کنید. در مثال ما ۵ مورد وجود دارد. با توجه به این موارد،‌ باید فایل functions.php را باز کرده و تکه کد زیر را به آن اضافه کنیم؛

function add_script()

{

   wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'js-script');

   wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'change');

   wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'popup');

   wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'carousel');

   wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'bootstrap');

}

add_action('wp_enqueue_scripts', 'add_script');

ساختار کد، شبیه همان کدی است که برای پیکربندی سی اس اس نوشتید، با این تفاوت که به جای wp_register_style از wp_register_script استفاده کردید.

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

حال می‌توانید از فایل footer.php، فایل‌های جاوا اسکریپت را حذف کرده و تکه کد زیر را جایگزین آن‌ها کنید:

<?php wp_footer(); ?>

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

قدم ۹: پیکربندی تصاویر

یکی از آسان‌ترین قدم‌های ساخت قالب وردپرس با html، پیکربندی تصاویر است. شما باید مسیر تصاویر را به درستی مشخص کنید. برای این کار در فایل index.php به دنبال img src بگردید. در مثال ما، هشت تصویر وجود دارد و شما به مسیرهای تک تک آن‌ها نیاز خواهید داشت.

کد پی اچ پی زیر را در میان تگ‌های src اضافه کرده و فایل را ذخیره کنید:

<img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image” />

حال، قالب وردپرس شما شبیه قالب اچ تی ام ال شده و تمامی تصاویر برای شما بارگذاری خواهند شد:

اما هنوز ویژگی‌های وردپرس نظیر تغییر عنوان سایت، در قالب شما غیرفعال است.

قدم ۱۰: تغییر عنوان سایت در وردپرس

اگر به منوی مدیریت سایت در وردپرس رفته و سعی در تغییر عنوان سایت داشته باشید، متوجه خواهید شد که عنوان سایت شما تغییر نخواهد کرد.

برای انجام این کار، می‌توانید از تابع از پیش تعریف شده ()bloginfo استفاده کنید. در فایل header.php و در میان تگ‌های title، از این تابع استفاده کرده و نام دلخواه خود را برای سایت بگذارید. سپس فایل را ذخیره کنید.

<?php bloginfo( 'name' ); ?>

همچنین باید این تابع را بین تگ‌های h1 نیز استفاده کنید:

حال می‌توانید عنوان دلخواه خود را در سایت مشاهده کنید:

کلام پایانی درباره ساخت قالب وردپرس با html

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