ساخت صفحه اصلی سفارشی در وردپرس راهنمای جامع

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

صفحه اصلی سایت چیست

قبل از اینکه بریم سراغ روش‌ها، بذارید یه لحظه سر همین موضوع مکث کنیم.

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

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

صفحه اصلی پیش‌فرض وردپرس

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

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

قدم اول: یه برگه جدید بسازید

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

یه اسم دلخواه براش بذارید؛ مثلاً «صفحه نخست» یا «خانه»، هر چی که خودتون راحت‌ترید. یه برگه‌ی تازه براتون باز میشه که می‌تونید هر طور دوست دارید سفارشیش کنید و بعد منتشرش کنید.

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

روش‌های ساخت صفحه اصلی سفارشی در وردپرس

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

روش اول: استفاده از صفحه‌سازها

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

بیایید این روش رو به‌صورت عملی با المنتور پیش ببریم. خبر خوب اینکه نسخه‌ی رایگان المنتور هم برای این کار کاملاً کافیه.

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

۲. انتخاب قالب مناسب برای برگه. حالا برگه‌ای که ساختید رو باز کنید و توی قسمت قالب دنبال گزینه‌های جدید المنتور بگردید. اینجا دو تا حالت مهم دارید:

• تمام عرض المنتور: اگه می‌خواید هدر و فوتر سایتتون روی این صفحه دیده بشه، این گزینه رو انتخاب کنید.
• کنواس المنتور: اگه می‌خواید یه صفحه‌ی کاملاً خالی بدون هدر و فوتر داشته باشید.

معمولاً برای صفحه اصلی، «تمام عرض المنتور» انتخاب خوبیه. یه بار ذخیره کنید و صفحه رو رفرش کنید تا مطمئن بشید هدر و فوترتون سر جاشون قرار گرفتن.

۳. ویرایش با المنتور. از بالای برگه دکمه‌ی ویرایش با المنتور رو بزنید. حالا دستتون برای طراحی کاملاً بازه:

• از بلوک‌های آماده‌ی المنتور استفاده کنید؛ یه بلوک انتخاب می‌کنید و محتواش رو با محتوای خودتون جایگزین می‌کنید.
• یه فلکس‌باکس یا سکشن چند ستونه بسازید و مثلاً تصویرها، اسلایدر یا باکس‌هاتون رو داخلش بچینید.
• اگه قالبی نصب کردید که با المنتور سازگاره (مثل قالب اهورا)، ویجت‌های اضافه‌ای مثل باکس آیکون، شبکه پست یا نمایش آخرین پست‌ها هم در اختیارتون قرار می‌گیره که کار رو خیلی راحت‌تر می‌کنه.

هر وقت کارتون تموم شد، دکمه‌ی انتشار (یا به‌روزرسانی) رو بزنید.

اگه می‌خواید توی انتخاب یه صفحه‌ساز حرفه‌ای راحت‌تر تصمیم بگیرید، مقاله‌ی «بهترین صفحه‌ساز وردپرسی» رو حتماً یه نگاهی بندازید.

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

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

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

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

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

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

برای این روش لازمه تا حدی با شیوه‌ی برنامه‌نویسی وردپرس و همین‌طور PHP، HTML و CSS آشنا باشید.

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

اگه قالبتون این فایل رو نداشت، خودتون می‌تونید بسازیدش. اول یه فایل خالی با اسم front-page.php درست کنید، بعد از طریق FTP توی پوشه‌ی قالب فعلیتون روی هاست بارگذاریش کنید. به‌محض ساخته شدن این فایل، وردپرس شروع می‌کنه ازش برای نمایش صفحه اصلی استفاده کردن. چون فایل خالیه، ممکنه یه صفحه‌ی کاملاً سفید ببینید؛ نگران نباشید، این طبیعیه و برای اینکه صفحه محتوا داشته باشه باید از کد HTML استفاده کنید.

کد زیر هم هدر و منوی سایتتون رو حفظ می‌کنه و هم محتوا و نوارهای کناری رو کنار می‌ذاره تا دستتون برای طراحی دلخواه باز باشه:

php

<?php /*
This page is used to display the static frontpage.
*/

// Fetch theme header template
get_header(); ?>
    <div id="primary" <?php astra_primary_class(); ?>>

    <div class="custom-homepage-container">

    You custom homepage code goes here

    </div>

    </div><!-- #primary -->
//Fetch the theme footer template
<?php get_footer(); ?>

معرفی برگه به‌عنوان صفحه اصلی (تنظیمات خواندن)

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

الان اگه آدرس برگه‌تون رو باز کنید، آدرسش یه چیزی شبیه yoursite.com/صفحه-اصلی هست. ولی ما می‌خوایم وقتی کسی خودِ yoursite.com رو باز کرد، مستقیم همین صفحه رو ببینه. برای این کار:

از پیشخوان برید به تنظیمات ← خواندن.

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

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

انتخاب برگه مخصوص وبلاگ

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

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

رایج‌ترین المان‌های صفحه اصلی سایت

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

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

حوزه کاری‌شما المان‌ها را تعیین می‌کند

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

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

اول هدف، بعد طراحی

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

افزونه صفحه‌ساز المنتور چیست؟

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

قابلیت کشیدن و رها کردن (Drag & Drop)

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

مزایای استفاده از المنتور

حالا شاید بپرسید چرا این‌همه آدم سراغ المنتور می‌رن؟ چند تا دلیل اصلیش رو براتون می‌گیم:

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

آموزش طراحی صفحه اصلی سایت با المنتور در ۳ مرحله

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

مرحله ۱: ورود به ویرایشگر المنتور

اول برید تو همون صفحه‌ای که می‌خواید طراحی یا ویرایشش کنید. بالای صفحه یه دکمه می‌بینید به اسم «ویرایش با المنتور» یا «Edit with Elementor». روش کلیک کنید تا وارد محیط ویرایشگر بشید.

مرحله ۲: آشنایی با پنل Elements و Global

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

المان‌ها (Elements): همهٔ ویجت‌ها و ماژول‌های محتوا اینجان؛ همونایی که می‌کشی رو صفحه. این ویجت‌ها توی دسته‌بندی‌های جدا مرتب شدن (مثل Basic، General، نسخهٔ Pro، Site و ووکامرس) که راحت پیداشون کنی. یه کادر جستجو هم بالای همین تب هست؛ اسم ویجت رو بزنی، سریع میارتش.

گلوبال (Global): اینجا ویجت‌های گلوبال (سراسری) قرار می‌گیرن؛ یعنی ویجت‌هایی که یه بار می‌سازی و ذخیره می‌کنی تا هر جای سایت خواستی دوباره ازشون استفاده کنی. حُسنش اینه که یکی رو ویرایش کنی، همه‌جا هم‌زمان آپدیت می‌شه. (این قابلیت مال نسخهٔ Pro هست.)

چند دقیقه با پنل ور برو و باهاش آشنا شو. لازم نیست همه‌چی رو حفظ کنی؛ همین که بدونی هر چیزی کجاست کافیه.

مرحله ۳: افزودن و ویرایش المان‌ها

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

نکات مهم برای داشتن یه صفحه اصلی کاربردی

حالا که با روش‌ها آشنا شدید، بذارید چند تا نکته‌ی مهم رو هم باهاتون در میون بذارم. همون‌طور که اول گفتم، صفحه اصلی یکی از تأثیرگذارترین صفحه‌های سایتتونه و کاربر با دیدنش یه تصویر ذهنی از شما و کارتون می‌سازه.

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

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

عملکرد سایتتون رو بسنجید. بررسی عملکرد صفحه اصلی رو فراموش نکنید. یکی از بهترین ابزارها برای این کار Google Analytics هست که نشونتون میده کاربرها چطور با سایتتون رفتار می‌کنن؛ کجاها می‌مونن، کجاها می‌رن و چی براشون جذابه. این اطلاعات طلاست، چون بهتون میگه کجای کارتون درسته و کجا باید بهترش کنید.

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

جمع‌بندی

خب رسیدیم به آخر کار. حالا یه مسیر کامل جلوی روتونه: اول یه برگه می‌سازید، بعد با یکی از سه روش (صفحه‌ساز، گوتنبرگ یا کدنویسی) طراحیش می‌کنید، و در آخر از تنظیمات ← خواندن به‌عنوان صفحه نخست معرفیش می‌کنید.

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

سوالات متداول

تیم تولید محتوا

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