آموزش ساخت 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 شما میتونید هر اسمی که دوست دارید قرار بدید .

۸ – این صفحه رو ذخیره میکنیم تموم شدش رفت .
9- حالا میریم به قسمت مدیریت سایت ، پنل ادمین منظورم هستش ، بعدش از سربرگ برگه ها گزینه  افزودن برگه را کلیک میکنیم  . یک اسمی همینطوری به عنوان Title صفحه میدهیم . مثلا { درباره ما } و در قسمت پایینش متن مورد نظر خودمون وارد میکنیم …
10 – مهمترین بخش این قسمت سمت چپ صفحه قسمت دوم با عنوان صفات برگه هستش که از قسمت بازشو 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(); ?>

 

 

مرتضی گرانسایه


ارسال دیدگاه شما

دیدگاه های ارسال شده برای این مطلب
  1. مریم گفت:

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

    هیچ مطلبی تو اینترنت در این رابطه وجود نداره.چند تا مطلب هم که بود خیلیی مبهم بود چیزی متوجه نشدم
    میشه لطفا راهنماییم کنید؟؟؟؟؟
    با تشکر

    • مرتضی گرانسایه گفت:

      سلام
      اگر میخواهید توی برگه مطلب نمایش بدید، میتونید از کوئری وردپرس استفاده کنید. کلیدواژه انگلیسی: wordpress query

  2. محمد گفت:

    با سلام و احترام

    مطلب را به این قشنگی توضیح دادید فقط قسمت آخرش خراب کردید و ناقص توضیح دادید
    اصلا نگفتید این div بایک کجا و کدام صفحه این کد را قرار بدیم

    باز هم ممنون از شما

    • مرتضی گرانسایه گفت:

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

  3. محمد گفت:

    با سلام و احترام

    این مطلب خیلی مطلب نابی بود فقط اشکالی که داشت این بود این کد DIV را در مورد ۱۱ باید کجا قرار بدیم اصلا اشاره نکردید لطفا راهنمایی کنید

    موفق باشید

  4. مجید گفت:

    : ساخت یک Div به عنوان Div اصلی و قرار دادن Content در داخل اون و قرار دادن کن CSS بر مبنای Div اصلی و سپس Content مثل ?
    این رو باید کجا قرار بدم و مطلبم رو قرار بدم تو همون برگه که می سازم اینو بزرام و تو دو تا نقطه ایی که بین دایوها قررا دادی مطلبو بنویسم.
    اگه آره من انجام دادم نشد.

    من اینجوری تو برگه ای که تمپلیتو عوض کردن نشد چکار کنم.؟
    پیشاپیش ممنونم.

    توجه داشته باشید که به جای اسم Full width شما میتونید هر اسمی که دوست دارید قرار بدید .

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

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

    .Fullwidth {
    width: ۱۰۰%;
    }

  5. مجید گفت:

    یه سوال دیگه اینکه من یه صفحه خودم کد پی اچ پی اش رو نوشتم و می خوام تو ورد پرس ازش استفاده کنم همه چیش فرق می کنه هم کدش و هم قالبش چطوری ان برگه رو اضافه کنم و ازش استفاده کنم؟ این کار شدنیه اصلا؟ ممنون میشم جواب بدین

    • مرتضی گرانسایه گفت:

      بله قابل انجام هست، فقط کافیه بخش ابتدایی که اسم فایل بصورت کامنت نوشته شده رو به ابتدای فایلتون اضافه کنید و فایل رو در پوشه پوسته تون قرار بدید.

  6. ووکب گفت:

    سلام داداش من میخوام یه سایت درست کنم که برای هر کاربر آن صفحه متفاوت باشه مثلا رضا احمدی که به سایت وارد میشه موجودیش ۲۰تومن باشه امیر احمدی ۴۰ چطوری اینارو درست کنم لطفا راهنمایی کنید

    • پارسا کافی گفت:

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

  7. sajsd گفت:

    سلام من با همین روش جلو رفتم ولی یه مشکلی که دارم پست هام رو نشون نمیده…اینطور بگم که توی صفحه اصلی پست های اخیر رو دارم و بعد با اومدن به بخش بلاگ باید همه پست ها رو داشته باشم ولی الان بهشون توی بلاگ دسترسی ندارم…شما میدونید باید چکار کنم؟؟؟

  8. sevda گفت:

    سلام وقت بخیر
    من یک سایت خبری دارم که میخوام یک سرویس مجزا تحت عنوان کرونا بهش اضافه کنم مثل سایت خبرگزاری مهر https://www.mehrnews.com/ که مخاطب میتونه بره داخل سرویس ویژه کرونا و اخبار مربوطه رو بخونه. چطور میتونم این کار رو انجام بدم؟ چه افزونه ای رو باید بخرم؟