آموزش وردپرس

آموزش طراحی برگه ی دلخواه در وردپرس Custom Page

آموزش طراحی برگه ی دلخواه در وردپرس

خوب برای یک سری از دوستان شاید سوال پیش بیاد ، که چطور این گونه صفحات ایجاد کنیم ، برای همین تصمیم گرفتم یک آموزشی در این باره در این پست قرار بدهم …
آموزش : فرض کنیم شما سایتی دارید که دارای یک Sidebar و یک Content میباشد . { از نظر ظاهری منظورم هستش ، دو ستونه } حال میخواهید در یک صفحه ای خاص مثلا صفحه اصلی سایت اون قسمت سایدبار وجود نداشته باشد .
دقیقا به این عمل ” ساخت یک تمپلیت با عنوان Custom Page ” میگن .

۱ – برای این کار از صفحه Page.php خودتون یک کپی میگیرید و در همان پوشه قالب Paste میکنید و یک اسم دلخواه و متفاوت از دیگر صفحات میدهید . مثلا Fullwidth.php چطوره ؟!
۲ – خوب این صفحه رو با یک ادیتوری که مختص کارتون هستش باز میکنید . مثلا SublimeText دوست داشتنی خودم یا NuSphere همه فن حریف ! { من ادیتورهایی که خودم باهشون کار میکنم نوشتم حتی با یک نوت پد ساده هم میتونید ادیت کنید که من اصلا پیشنهاد نمیکنم . این برنامه ها ساخته شده ان که کارتون راحت کنن دیگه دوران ادیت حرفه ای با نوت پد تموم شدش }
۴ – اگر در قسمت بالای صفحه یک سری دستورات Comment وجود داشت همش رو پاک میکنیم … { دستور کامنت که میگم منظورم چی هستش ؟! دستوراتی که اولش با این علامت شروع میشود */ و انتهاش هم با این علامت تموم میشود /* . البته تو خیلی از قالبها دیگه وجود نداره …به هر حال اگر بود پاک کنیدش !!!
۵- در این صفحه اول دستوری مانند زیر شروع شده :

 

کد:
<?php get_header(); ?>

 

و در نهایت با دستوری با عنوان ::

 

کد:
<?php get_footer(); ?>

تموم شده . { البته اگر اشتباه نکنم و قالبتون شبیه به قالب تست من باشه ! }
۶- خوب ما می خواستیم قسمت ساید بار این صفحه نباشه . کافی هستش که کد زیر که بالای کد Get_Footer هستش رو حذف کنید ::

 

کد:
<?php get_sidebar(); ?>

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

 

کد:
<?php /* Template Name: Full width */ ?>

توجه داشته باشید که به جای اسم Full width شما میتونید هر اسمی که دوست دارید قرار بدید .
۸ – این صفحه رو ذخیره میکنیم تموم شدش رفت .
۹- حالا میریم به قسمت مدیریت سایت ، پنل ادمین منظورم هستش ، بعدش از سربرگ برگه ها گزینه افزودن برگه را کلیک میکنیم . یک اسمی همینطوری به عنوان Title صفحه میدهیم . مثلا { درباره ما } و در قسمت پایینش متن مورد نظر خودمون وارد میکنیم …
۱۰ – مهمترین بخش این قسمت سمت چپ صفحه قسمت دوم با عنوان صفات برگه هستش که از قسمت بازشو template می تونی اسم اون صفحه ای که ساختی پیدا کنید و بروش کلیک کنی و در انتها بروی انتشار کلیک کنی .

۱۱- تقریبا کار تموم هستش . فقط یک مشکل کوچیکی این وسط پیش اومده و اون هم اینکه وقتی ساید بار ما حذف کردیم در این صفحه به واسطه اون CSS که به کل صفحات دادیم و به اون Content دادیم قسمت Sidebar ما خالی جاش چون ساید باری وجود نداره . برای حل این مشکل دو راه بهتون پیشنهاد میکنم ::
راه اول :: ساخت یک Div به عنوان Div اصلی و قرار دادن Content در داخل اون و قرار دادن کن CSS بر مبنای Div اصلی و سپس Content مثل زیر ::

 

کد:
<div id="master">
کد:
<div id="content">
  . . .
</div>
</div>
 
<!-- Style CSS -->
<style type="text/css" media="screen">
#master #content {
  width: 100%;
}
</style>

آموزش طراحی برگه ی دلخواه در وردپرس

روش دوم :: قرار دادن یک کلاس در داخل Div مربوط به Content و استایل دادن به آن کلاس .

 

کد:
<div id="content" class="Fullwidth">
کد:
. . .
</div>
 
<!-- Style CSS -->
<style type="text/css" media="screen">
.Fullwidth {
  width: 100%;
}
</style>
آموزش طراحی برگه ی دلخواه در وردپرس

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

منبع: وردپرس پارسی
برچسب ها
نمایش بیشتر

سید حامد حسینی

بنده سید حامد حسینی هستم ، میدیریت سایت آقای وردپرس و ووکامرس فارسی ، دوست وردپرسی شما ، تیم آقای وردپرس

نوشته های مشابه

‫4 نظرها

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

دوره رایگان طراحی سایت از صفر تا صد

دوره رایگان طراحی سایت از صفر تا صد

برای شرکت در دوره رایگان آموزش طراحی قالب وردپرس ( طراحی سایت ) ایمیل خود را وارد کنید

اشتراک شما با موفقیت انجام شد ( ایمیل خود را چک کنید)

بستن