امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

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

5

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

برای انجام این کار گزینه‌هایی وجود دارد. یک روش ساده استفاده از یک ابزارک می‌باشد که شما با ثبت آن در بخش مربوطه داخل قالب پوسته‌تان آن را اضافه می‌کنید. اما روش دیگری که به شما امکان انعطاف‌پذیری بیشتری می‌دهد این است که یک “نوع پست سفارشی” با نام banner ایجاد کنید و از آن برای نمایش یک یا تعداد بیشتری بنر استفاده کنید. شما حتی می‌توانید از این روش برای نمایش بنر از یک دسته خاص نیز استفاده کنید.

در این آموزش شما آشنا می‌شوید با :

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

موارد لازم

جهت تکمیل مراحل این آموزش به موارد زیر نیاز خواهید داشت:

  • یک وردپرس نصب شده
  • دسترسی به فایل‌های پوسته‌تان

در این آموزش من از پوسته فرزندی که برای پوسته دو هزار و دوازده وردپرس ایجاد کرده‌ام استفاده خواهم کرد. شما نیز به راحتی می‌توانید این روش را در پوسته خود اجرا کنید.

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

ایجاد نوع پست برای بنر

قدم اول ایجاد یک نوع پست برای بنر می‌باشد که برای انجام این کار کدهای زیر را در فایل functions.php پوسته خود وارد می‌کنیم.

// register a custom post type called 'banner'
function wptutsplus_create_post_type() {
	$labels = array( 
		'name' => __( 'بنرها' ),
		'singular_name' => __( 'بنر' ),
		'add_new' => __( 'افزودن بنر' ),
		'add_new_item' => __( 'افزودن بنر جدید' ),
		'edit_item' => __( 'ویرایش بنر' ),
		'new_item' => __( 'بنر جدید' ),
		'view_item' => __( 'نمایش بنر' ),
		'search_items' => __( 'جستجو در بنرها' ),
		'not_found' =>  __( 'بنری پیدا نشد' ),
		'not_found_in_trash' => __( 'برنی در زباله دان پیدا نشد' ),
	);
	$args = array(
		'labels' => $labels,
		'has_archive' => true,
		'public' => true,
		'hierarchical' => false,
		'supports' => array(
			'title', 
			'editor', 
			'excerpt', 
			'custom-fields', 
			'thumbnail',
			'page-attributes'
		),
		'taxonomies' => array( 'post_tag', 'category'), 
	);
	register_post_type( 'banner', $args );
} 
add_action( 'init', 'wptutsplus_create_post_type' );

کد بالا یک نوع پست جدید با نام banner ایجاد می‌کند.

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

2

ایجاد یک تابع برای نمایش بنر

قدم بعدی ایجاد یک تابع با استفاده از WP_Query است که پست‌های بنر را جستجو کرده و تمام بنرهای موجود را نمایش می‌دهد. شما بعداً این تابع را در هر مکانی از پوسته‌تان که می‌خواهید بنر نمایش یابد، اضافه می‌کنید.

 دوباره به فایل functions.php پوسته‌تان مراجعه کرده و کدهای زیر را به آن اضافه کنید.

// function to show home page banner using query of banner post type
function wptutsplus_home_page_banner() {
 
    // start by setting up the query
    $query = new WP_Query( array(
        'post_type' => 'banner',
    ));
 
    // now check if the query has posts and if so, output their content in a banner-box div
    if ( $query->have_posts() ) { ?>
        <div class="banner-box">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class( 'banner' ); ?>><?php the_content(); ?></div>
            <?php endwhile; ?>
        </div>
    <?php }
    wp_reset_postdata();
 
}

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

اضافه کردن تابع به فایل قالب‌تان

در حال حاضر بنر(ها) در هیچ جای سایت‌تان نمایش نمی‌یابند- چون که هنوز آن را به قالب سایت‌تان اضافه نکردید.

در این آموزش ما تابع را به فایل header.php اضافه خواهیم کرد، اما شما می‌توانید آن را به هر فایل دیگری که در نظر دارید اضافه کنید. مثلاً footer، sidebar و یا یک صفحه خاص مانند front-page.php .

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

if (is_home_page())

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

در داخل فایل header.php مان کد زیر را داخل تگ <div id=”main”> اضافه می‌کنیم. با توجه به اینکه ما یک پوسته فرزند ایجاد کرده‌ایم، پس یک فایل header.php جدید ایجاد می‌کنیم که در واقع کپی فایل header.php پوسته اصلی (2012) می‌باشد با این تفاوت که کد زیر به آن اضافه شده است.

<?php 
	if ( is_front_page() ) {
    	wptutsplus_home_page_banner();
	}
?>

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

3

استایل‌دهی بنر

در حال حاظر بنری که درست کردیم زیاد به چشم نمی‌خوره! پس بهتره یکم استایل بهش بدیم!

در فایل شیوه‌نامه(stylesheet) پوسته خود کد زیر را وارد نمایید.

.home .banner-box {
    text-align: center;
    color: red;
    font-size: 1.2em;
    border: 1px solid red;
    padding: 1em;
}

کد بالا، بنرمان را داخل یک جعبه قرمز رنگ قرار می‌دهد تا یکم خود نمایی کند.

4

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

.home .banner-box .category-highlight {
    background: red;
    color: #fff;
    margin: 0;
    padding: 0.5em;
}

کد بالا باعث می‌شود بنرهایی که در دسته highlight قرار دارند بیشتر به چشم بخورند!

5

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

دانلود فایل‌های این آموزش

امیدوارم این آموزش مورد پسند شما واقع شده باشد و استفاده لازم را از آن برده باشید.

منبع

درباره امین بهشتی

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

  1. سلام … ببخشید یه سوال داشتم مربوط به این پست نبود … توی اینترنت اکسپلورر (من ورژن 8 رو امتحان کردم) علامت های نگارشی (مثل نقطه و ویرگول و دونقطه و …) متن هایی که با فونت Droid Arabic Naskh هستن به صورت مستطیل و ناخوانا نشون داده میشن … می خواستم ببینم راه حلی برای این مشکل هست ؟؟

    • با سلام،
      من روی IE8 تست نکردم فونت Droid Arabic Naskh را، برای همین نمی‌تونم جواب دقیقی براتون بدم.

      اما نکته‌ای که بد نیست یادآوری کنم اینه که مطمئن باشید که فرمت eot فونت را دارید و بصورت زیر آن را فراخوانی کرده باشید.

      @font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
      

      در خط چهارم کد بالا، نحوه صحیح فراخوانی فونت برای اینترنت اکسپلورر ورژن‌های 6 تا 8 را نشان می‌دهد.

      سپاس

  2. سلام؛
    آقا امین دم شما گرم! فوق العاده بود. دیگه داشتم دیونه می شدم کل اینترنتو گشتم تا بالاخره این مطلب به کارم اومد. خیلی هم به کارم اومد. من میخواستم یه پست ثابت بدون ادامه مطلب بالای پست ها بذارم (مثلا تبلیغات یا معرفی محصول) که بالاخره با پست سفارشی بنر و آموزش شما تونستم این کارو انجام بدم.
    فقط یه مشکل کوچیکی برام پیش اومده اینکه تو پیشخوان مدیریتم بعد از اینکه این کدها را به فایل functions.php اضافه کردم دیگه هرموقع دکمه بروزرسانی رو بعد از ویرایش فایلها میزنم وراد صفحه سفید میشه البته بروزرسانی میشه ولی باید back مرورگر رو بزنم تا دوباره وارد پیشخوان بشم و کارای دیگه رو انجام بدم.

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.