آموزش ساخت Custom Page-صفحه ای مجزا از دیگر صفحات

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

آموزش : فرض کنیم شما سایتی دارید که دارای یک 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>

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

امیدوارم از این آموزش لذت برده باشید … همونطور که گفتم این آموزش آقا Parsa@ در این پست به صورت خلاصه و دقیق و کمی حرفه ای بیان کردن که من چون خودم آماتور بودم و نیاز به یادگیری این آموزش داشتم و موضوع را فهمیدم گفتم بیام و این آموزش برای امثال خودم هم به صورت روان قرار بدم …  { بازم میگم من نهایت نیم ساعت بعد از یادگیری این مطلب این آموزش را قرار دادم ، پس اگر جایی مشکل داشتم بزرگان به بزرگی خودشون ببخشن ، تمام این آموزش برگرفته از چند ویدیو آموزشی بود که از سایت یوتیوب دانلود و تماشا کردم } .

موفق باشید

بروزرسانی:

کدهای زیر را در یک فایل قرار داده و با پسوند .php در پوشته پوسته تان قرار دهید.

<?php
/* Template Name: Full width */
get_header();
?>

<div id="content" class="Fullwidth">
. . .
</div>

<?php get_footer(); ?>