مجموعه آموزشی پی استور - https://programstore.ir

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

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

کاربردهای وردپرس

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

هدر یا عنصر بالایی سایت

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

بدنه اصلی سایت

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

فوتر یا عنصر پایینی صفحه

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

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

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

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

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

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

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

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

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

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

ایجاد فایل های پی اچ پی

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

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

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

پوشه assets

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

پوشه قالب وردپرس

قدم بعدی ساخت قالب وردپرس با 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

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

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

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

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

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

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

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

محتویات فایل header.php

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

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

محتویات فایل فوتر

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

محتویات فایل 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” بگردید:

پیکربندی فایل css

سپس 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(); ?>

فایل header.php

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

مشاهده سایت وردپرس

این به خاطر آن است که هنوز فایل جاوا اسکریپت خود را پیکربندی نکرده‌اید. در ادامه ساخت قالب وردپرس با 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 نیز استفاده کنید:

تابع بین تگ‌های h1

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

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

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

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

[vc_row rtl_reverse=”yes” css=”.vc_custom_1653562913599{padding-top: 10px !important;padding-right: 30px !important;padding-bottom: 10px !important;padding-left: 30px !important;background-color: #eeeff1 !important;border-radius: 15px !important;}”][vc_column width=”1/3″][vc_single_image image=”13763″ img_size=”full” alignment=”center” onclick=”custom_link” img_link_target=”_blank” link=”https://programstore.ir/shop/%D9%BE%D8%A7%D9%88%D8%B1%D9%BE%D9%88%DB%8C%D9%86%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3/?utm_source=posts”][/vc_column][vc_column width=”2/3″][vc_column_text]

پاورپوینت طراحی قالب وردپرس

پاورپوینت آماده طراحی قالب وردپرس در 30 اسلاید با فرمت pptx. با قابلیت ویرایش برای ارائه درسی آماده دانلود می‌باشد. در این پاورپوینت به نحوه ایجاد قالب وردپرس و استفاده از آن به صورت کاملاً کاربردی پرداخته شده است.

همین الان کلیک کنید [7]

[/vc_column_text][/vc_column][/vc_row]