چگونه قالب یک صفحه را در وردپرس بصورت دلخواه درآوریم؟

چهارشنبه, ۱ام اردیبهشت , ۱۳۸۹ | ۱۷ دیدگاه

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

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

و بعد به سراغ بخش تنظیمات می رویم. حتماً در بخش تنظیمات و در برگه خواندن به اولین گزینه توچه نموده اید:

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

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

<?php
/*
Template Name: نام دلخواه خودتان
*/
?>

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

<?php get_header(); ?>
کدهای اچ تی ام ال را اینجا می نویسیم
<?php get_footer(); ?>

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

/www/wp-content/themes/default

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


پس وارد بخش ویرایش برگه ائی که به نام خانه ایجاد نمودیم می‌شویم و کشاب این گزینه را در همین بخش صفحه خانه باز نموده و گزینه cover page را انتخاب می نماییم تا با این کار به وردپرس بفهمانیم که برای این صفحه از قالب کاوری که تهیه نمودیم استفاده نماید. صفحه را بروزرسانی می‌کنیم و … کار تمام است!


فقط نکته کوچکی باقی می‌ماند مربوط به زمانی که می‌خواهیم صفحه کاور را بارگزاری نماییم:
ممکن است شما در این صفحه از CSS خارجی استفاده نموده باشید و مطمئناً تصاویری هم در این طراحی خواهید داشت که مطابق عادت معمول آن‌ها را آدرس دهی نموده باشید ، یعنی آدرس دهی که در آن تصاویر یا صفحه CSS از یک پوشه یا صفحه در همان دایرکتوری ، فراخوانی می شوند. در اینصورت بخاطر داشته باشید که دایرکتوری که باید پوشه تصاویر و CSS خارجی را در آن قرار دهید بجای دایرکتوری قالب ، دایرکتوری روت بلاگ شما خواهد بود. این صفحه استایل و گرافیک خود را از محلی که از آنجا برای کلاینت ارسال می‌شود خواهد گرفت.
با همین روش می‌توانید برای بلاگ خود صفحات متعدد استاتیک ایجاد نمایید. بخاطر داشته باشید که درصورتی که نمی‌خواهید این برگه ها در منوی بالای بلاگ شما به نمایش درایند می‌توانید در بخش صفات از ویرایش برگه ها برای آن‌ها یک برگه مادر انتخاب نمایید ( صفت پیش‌فرض «سرآغاز» است که می‌توانید آنرا به یکی دیگر از برگه ها تغییر دهید).
در انتها اینکه در همین پایگاه کامران عزیز پستی داشتند درباره نمونه‌های صفحات اول سایت هائی که با وردپرس تهیه شده بودند که دیدن آن‌ها می‌تواند بسیار ایده آفرین باشند. همینطور نمونه نهائی کار من را هم می‌توانید در آدرس www.teczip.com مشاهده نمایید.
از اینکه خواننده خوب این پایگاه هستید از شما سپاسگزارم.

Be Sociable, Share!


۱۷ دیدگاه


  1. هادی
    ۲ اردیبهشت ۱۳۸۹

    کامران جان سلام
    لطفا برای درست شدن این راهنما در کدبار اول کد

    و در کدبار دوم کد

    کدهای اچ تی ام ال را اینجا می نویسیم

    را اضافه کن و البته با تغییر راست چین آنها به چپ چین
    ممنون




  2. کامران
    ۲ اردیبهشت ۱۳۸۹

    ممنون هادی جان درست شد



  3. […] This post was mentioned on Twitter by Mahan Rahmani. Mahan Rahmani said: <div style="direction:rtl;text-align:right">چگونه قالب یک صفحه را در وردپرس بصورت د�… http://ping.fm/CHQw9 […]




  4. شاهین
    ۶ اردیبهشت ۱۳۸۹

    لطفاً کدهای اچ تی ام ال را آنجا بنویسید!
    منتظریم..




  5. safari
    ۸ اردیبهشت ۱۳۸۹

    آقا کدهای اچ تی ام ال چی شد؟




  6. هادی
    ۸ اردیبهشت ۱۳۸۹

    کامران جان سلام
    نه اونجا واقعا باید یکی دو خط php نوشته بشه که برای شما ایمیل کردم.
    از همه دوستان معذرت می خوام . قصور از من بود! برای بار دوم یادم رفت کدبار ها رو کنترل کنم.
    لینک زیر (اگر جعبه نظرات بلاگ اجازه درج اونو بده!) نسخه pdf همین مقاله هست که دوستان می تونن با حجم پایین دانلودش کنن:
    http://www.divshare.com/download/11193268-2a4

    و باز هم از همه دوستان عذر خواهی می کنم




  7. safari
    ۸ اردیبهشت ۱۳۸۹

    در متن نوشته اند:
    “گر بخواهیم کاور برگه ما دارای همان هدر و فوتر مابقی صفحات بلاگ ما باشند ، دو خط زیر را به زیر کدهای بالا اضافه می نماییم:

    کدهای اچ تی ام ال را اینجا می نویسیم

    خط اول هدر بلاگ ما را به صفحه اضافه می‌کند و خط دوم فوترمان را به صفحه اضافه خواهد نمود و طبیعی است که کدهای HTML خودمان را باید بین این دو خط قرار دهیم.”

    خب این منظور از این دو خط زیر چیست آیا باید خطهای هدر و فوتر را مثلا از page.php برداریم و در فایل کاور قرار دهیم؟




  8. کامران
    ۸ اردیبهشت ۱۳۸۹

    تصحیح شد




  9. mazinozi
    ۱۴ اردیبهشت ۱۳۸۹

    salam, chejuri mishe too footere ye word press ye flash gozasht




  10. Nafiseh
    ۲۴ مرداد ۱۳۸۹

    از سایت خوبتون واقعا ممنونم. من که دارم خیلی استفاده می کنم .
    فکر میکنم که Word press از دستورات Php استفاده می کنه. لطفا برای ما که با Asp.net کار می کنیم، بگین که از چه سیستم مدیریت محتوایی استفاده کنیم؟




  11. آندرس
    ۲ آبان ۱۳۸۹

    سلام با تشکر از آقا هادی بخاطر این پست مفیدشون
    با عرض معذرت میخواستم پاسخ این بازدید کننده عزیز رو بنده بدم هرچند مدت زیادی گذشته
    کسانی که تخصص در زمینه ASP.NET دارن میتونن از سیستم مدیریت محتوای دات نت نیوک استفاده کنن برای گرفتن اطلاعات بیشتر در مورد این سیستم میتونید به سایت : mydnn.ir مراجعه کنید.
    موفق باشید




  12. کیهان
    ۴ آبان ۱۳۸۹

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




  13. سجاد
    ۹ شهریور ۱۳۹۰

    خودشه.همون آموزشی که دنبالش بودم.دمت گرم.عالیه.خدا خیرت بده…الهی….(دعای نن جون)…دیگه نمیدونم چجوری تشکر کنم!




  14. آریان
    ۲۰ شهریور ۱۳۹۰

    سلام،
    من یه پوسته ی انگلیسی وردپرس طراحی کردم می خوساتم بدونم چطور میشه اون رو برای wordoress.org بفرستم،




  15. آریان
    ۲۰ شهریور ۱۳۹۰

    *می خوساتم = می خواستم




  16. خط و رنگ
    ۶ دی ۱۳۹۰

    بسیار بسیار ممنون. عالی بود.
    موفق باشید




  17. یو پی اس
    ۱۴ مرداد ۱۳۹۲

    با سلام
    ممنون عالی بود



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