سلام و عرض ادب و احترام خدمت دوستان عزیز وقت شما بخیر
در ادامه سری آموزش های وردپرس در خدمت شما عزیز ان هستیم با یکی دیگر از آموزش های مهم و کاربردی در این زمینه که میتواند برای شما نیز مفید بوده باشد و مشکلات شما را نیز حل کند.در قسمت های قبلی در مورد post type صحبت کردیم و سپس در این قسمت نیز در مورد post type اسلایدر صحبت میکنیم.پس تا انتها با من همراه باشید.
دوستان عزیز برای ساخت post type اسلایدر در وب سایت های وردپرسی ،یک سری کد که در پایین برای شما آورده ایم را در فایل فانکشن سلیت خود قرار دهید ، برای این کار کافیست به فایل فانکشن که در فایل محتویات قالب شما قرار دارد را در حالت ادیت باز کرده ، سپس کد زیر را قبل از ?> داخل آن قرار دهید:
add_theme_support( 'post-thumbnails' );
function slider_register() {
$args = array(
'label' => __('اسلایدر'), /////////////// نام post type
'singular_label' => __('اسلایدر'),
'public' => true, ///////////// حالت عمومی post type
'show_ui' => true, /////////////// نمایش Post type
'capability_type' => 'post', //////////// نوع post type
'hierarchical' => false,
'rewrite' => true,
'supports' => array('title', 'editor', 'thumbnail') ////////////// امکاناتی که post type خواهد داشت
);
register_post_type( 'slider' , $args ); ///////////// ساخت post type
}
add_action('init', 'slider_register');
حال به توضیح کد فوق میپردازیم.
به تابع add_theme_support( ‘post-thumbnails’ ); که در کد فوق وجود دارد توجه کنید که با استفاده از این کد تعیین می کنید که این post type در وب سایت وردپرسی شما اسلایدر از تصویر شاخص پشتیبانی می کند و مطالب آن دارای تصویر شاخص هستند و در کنار آن تابع slider_register وجود دارد نام تابعی است که که توسط آن post type ساخته می شود. این تابع دارای یک آرایه است که داخل آن آرگومان های post type تعریف می شود.
خب دوستان عزیز کد زیر را هم به ادامه کد فوق اضافه نمائید:
add_filter("manage_edit-slider_columns", "slider_edit_columns");
function slider_edit_columns($columns){
$columns = array(
"cb" => "<input type=\"checkbox\" />",
"title" => "slider",
"image" => "image",
);
return $columns;
}
function slider_thumbnail_url($pid){
$image_id = get_post_thumbnail_id($pid);
$image_url = wp_get_attachment_image_src($image_id,'screen-shot');
return $image_url[0];
}
add_action("manage_posts_custom_column", "slider_custom_columns");
function slider_custom_columns($column){
global $post;
$image_id = get_post_thumbnail_id($pid);
$image_url = wp_get_attachment_image_src($image_id,'screen-shot');
switch ($column)
{
case "image":
$custom = get_post_custom();
echo '<img src="'.$image_url[0].'" width="50" height="50" />';
break;
}
}
خب دوستان عزیز کد بالا در واقع ستون های post type اسلایدر را تعیین خواهد کرد.که شما با قرار دادن آن در وب سایت وردپرسی خود توانستید ستون های ان را بسازید و حالا میتوانید به مرحله بعدی این آموزش وردپرس بروید.دوستان عزیز پس از قرار دادن کد فوق در وب سایت وردپرس خود فایل را ذخیره کرده و سپس خواهید دید که post type اسلایدر در قالب وردپرسی وب سایت شما به منو سمت راست پیشخوان وردپرس اضافه شده است و می توانید اسلاید ها را در آن اضافه کنید.
خب دوستان عزیز مورد بعدی که وجود دارد این است که این اسلایدر در کجا نمایش داده شود؟
برای نمایش این اسلایدر در قالب وردپرس وب سایت شما از یک ابزارک استفاده میکنیم و کد کوتاه ان را ساخته و در این ابزارک قرار میدهیم.خب برای ساخت کد کوتاه این مورد در وب سایت وردپرس خود میتوانید از هک وردپرس زیر استفاده نمائید:
نکته:
در کد زیر از بوت استرپ استفاده شده است.
ساخت شورت کد post type اسلایدر
خب حالا نوبت به ساخت شورت کده.
اگر با روش ساخت شورت کد آشنا نیستید در زیر برای شما توضیح مختصری قرار داده ایم
ساخت شورت کد – مثال ساده
برای درک راحت تر نحوه ساخت شورت کد در وردپرس ، در ابتدا با یک مثال ساده و ابتدایی شروع خواهیم کرد. به یاد داشته باشید که شورت کدها همواره برای محتویات و توابعی که استفاده بسیاری می شوند ساخته می شوند.
خب حالا شروع می کنیم.
می خواهیم یک شورت کد در وردپرس بسازیم که هنگام فراخوانی عبارت “سلام. این یک نمونه شورت کد ابتدایی می باشد” را نمایش دهد. کد زیر این امکان را فراهم می کند:
در کد بالا ما یک فانکشن به نام sample_shortcode ساخته ایم و درون فانکشن با استفاده از تابع Return گفته ایم که عبارت داخل ‘ ‘ را چاپ کند.
با استفاده از کد add_shortcode(‘sample’, ‘sample_shortcode’); شورت کدی به نام sample ساخته ایم.
حال با فراخوانی شورت کد [subscribe] در هر قسمت از نوشته و یا برگه ها، عبارت “سلام. این یک نمونه شورت کد ابتدایی می باشد” نمایش داده خواهد شد.
نکته:
در کد زیر از بوت استرپ استفاده شده است.
خب حالا به ادامه آموزشمان باز می گردیم ، دوباره فایل فانکشن رو در حالت ادیت باز کنید و کد زیر را داخل آن قرار دهید:
function slider_shortcode($atts,$content = null) {
global $post;
$posts = new WP_Query($atts);
query_posts('post_type=slider'); // نام post type که ساخته این را قرار میدیم
ob_start();?>
<div id="carousel-main-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $slider=0; if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="item <?php if ($slider==0) { echo "active";} else { echo "";} ?>">
<?php the_post_thumbnail('full'); //////// تصویر شاخص ?>
<div class="carousel-caption">
<h3><?php the_title(); /////// عنوان اسلایدر ?></h3>
<?php the_content(); ///////// محتوای اسلایدر?>
</div>
</div>
<?php $slider++; endwhile; endif; ?>
</div>
<a class="left carousel-control" href="#carousel-main-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-main-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<?php
wp_reset_query();
return ob_get_clean()
; }
add_shortcode('big_slider', 'slider_shortcode'); ////
حال پس از قرار دادن کد فوق در وب سایت خود میتوانید ان را با استفاده از کد زیر فراخوانی نمائید:
[big_slider]
سخن آخر
خب دوستان عزیز این قسمت از سری آموزش های وردپرس نیز به پایان رسید ، در این قسمت به آموزش ساخت post type اسلایدر در وردپرس پرداختیم ، امیدوارم این آموزش مورد رضایت شما بوده و مفید واقع شده باشد ، اگر سوالی در طی این مطلب برای شما ایجاد شده و یا نقدی بر آن وارد می دانید با ارائه نقد خود به ما در جهت هر چه بهتر شدن یاری رسانید .
ممنونم از همراهی شما عزیزان و دوستان
منبع: بیگ تم مرجع آموزش های هک وردپرس و افزونه های وردپرس
دیدگاهتان را بنویسید