راه اندازی وردپرس

طراحی سایت اختصاصی | سید عباس حسینی 20 تیر 1400 0

راه اندازی وردپرس

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

نحوه راه اندازی پوسته:

برای شروع و استفاده از وردپرس بعد از نصب نیاز داریم تا فایل قالب خودمان را به پوشه themes وردپرس اضافه کنیم. بعد از کپی کردن قالب زمان آن رسیده که فرمت فایل صفحه اصلی خودمان را از HTML به PHP تغییر دهیم. برای شروع کار با وردپرس فقط به دو فایل Index.php و style.css است. حال که فرمت را تغییر داده ایم زمان آن است که فایل CSS خودمان را آماده سازی کنیم.

آماده سازی فایل CSS در وردپرس:

برای اینکه وردپرس بتواند اطلاعات در خصوص قالب ما را مطالعه کند و در قسمت افزودن پوسته اطلاعاتی از قالب به کاربر و یا استفاده کننده از آن را بدهد نیاز داریم تا دستوراتی را در قالب کامنت در فایل CSS خودمان اضافه کنیم. این دستورات در واقع نام نویسنده قالب آدرس اینترنتی و اینکه این قالب به چه منظور ایجاد شده است را از ما دریافت می کند تا در زمان نصب قالب آنها را به کاربر نمایش دهد.

/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

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

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

 

اتصال فایل های CSS و JS به وب‌سایت:

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

<?php echo get_template_directory_uri(); ?>

نکته:

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

 

تفکیک کردن فایل Index.php:

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

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

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

<?php get_template_part('content'); ?>

کافی است تنها نام فایل را درج کنید و فرمت آن حتما باید PHP باشد و نیاز به درج ندارد.

ایجاد منوی ادمین

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

تنها با استفاده از دو تابع وردپرس به آسانی می‌توانید این نوار را ایجاد کنید. ابتدا بعد از تابع قبلی که header را فراخوانی می کرد تابع زیر را قرار دهید و همین عمل را برای footer نیز انجام دهید.

<?php wp_head(); ?>
<?php wp_footer(); ?>

اتمام بخش بندی

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

ایجاد صفحه تک نوشته

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

برای این کار کافی است صفحه ای که برای نمایش تک محصول خودتان در نظر گرفته اید را تغییر نام دهید و نام آن را به single.php تغییر دهید با این عمل شما صفحه تک نوشته را ایجاد کرده اید. اگر مشاهده می‌کنید که دستورات CSS و زبان های دیگر بر روی آن اعمال نمی شود و شکل و زیبایی ندارد باید فرآیند header را برای آن انجام دهید این به این معنی است که شما دو تابع اصلی header و footer را در این صفحه قرار دهید و تگ های قبلی header را حذف کنید.



دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *