آموزش ایجاد اسلایدر در وردپرس

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

1 . نوع پست (Post Type) اسلایدر ایجاد می کنیم (کد زیر را در فایل Funcions.php قرار دهید) :

// برای اسلایدر سایت

add_action( 'init', 'codex_Cytus_init' );
function codex_Cytus_init() {
    $labels = array(
        'name'               => _x( 'اسلایدر ها', 'post type general name', 'Cytus-slider' ),
        'singular_name'      => _x( 'اسلایدر', 'post type singular name', 'Cytus-slider' ),
        'menu_name'          => _x( 'اسلایدر ها', 'admin menu', 'Cytus-slider' ),
        'name_admin_bar'     => _x( 'اسلایدر', 'add new on admin bar', 'Cytus-slider' ),
        'add_new'            => _x( 'افزودن جدید', 'Cytus', 'Cytus-slider' ),
        'add_new_item'       => __( 'افزودن اسلایدر جدید', 'Cytus-slider' ),
        'new_item'           => __( ' اسلایدر جدید', 'Cytus-slider' ),
        'edit_item'          => __( 'ویرایش اسلایدر', 'Cytus-slider' ),
        'view_item'          => __( 'مشاهده اسلایدر', 'Cytus-slider' ),
        'all_items'          => __( 'همه اسلایدر ها', 'Cytus-slider' ),
        'search_items'       => __( 'جستجو اسلایدر ها', 'Cytus-slider' ),
        'parent_item_colon'  => __( 'مادر اسلایدر ها:', 'Cytus-slider' ),
        'not_found'          => __( 'اسلایدری پیدا نشد', 'Cytus-slider' ),
        'not_found_in_trash' => __( 'اسلایدری در زباله دان پیدا نشد', 'Cytus-slider' )
    );
    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'Cytus' ),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array( 'title', 'editor', 'thumbnail')
    );
 register_post_type( 'Cytus', $args );
}

2. تصاویر شاخص وردپرس فعال می کنیم (کد زیر را در فایل Funcions.php قرار دهید):

// فعال سازی تصاویر شاخص وردپرس

if (function_exists('add_theme_support')) {
    add_theme_support( 'post-thumbnails' );
}

3. از اسلایدر زیر استفاده می کنیم:

پیوند : https://bootsnipp.com/snippets/4MeVm

4. کد زیر را در صفحه اصلی پوسته قرار دهید:

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
	<?php
        $arg = array(
                'post_type'   => 'Cytus',
                'posts_per_page' => 10,
                'order'   => 'ASC'
            );
        $Cytus= new WP_Query($arg);
        $j = 0;
        $post_count = wp_count_posts('Cytus')->publish;
    ?>
    <div class="carousel-inner">
		<?php while($Cytus->have_posts()) : $Cytus->the_post(); ?>
			<div class="carousel-item <?php echo $j==0 ? ' active': '';?>">
				<div class="mask flex-center">
				    <div class="container">
					    <div class="row align-items-center">
						    <div class="col-md-7 col-12 order-md-1 order-2">
						        <h4><?php the_title() ?></h4>
						        <p><?php the_content() ?></p>
					        </div>
					        <div class="col-md-5 col-12 order-md-2 order-1 mx-auto">
								<?php echo the_post_thumbnail('full'); ?>
						    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php $j++; endWhile; wp_reset_query(); ?>
	</div>
			 
	<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> 
		<span class="carousel-control-prev-icon" aria-hidden="true"></span> 
		<span class="sr-only">قبلی</span> 
	</a> 
	<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> 
		<span class="carousel-control-next-icon" aria-hidden="true"></span> 
		<span class="sr-only">بعدی</span> 
	</a>		
</div>

بخش نوشته اسلایدرها در کنار منو وردپرس ایجاد شده است و از این طریق محتوا اسلایدر را ارسال و نمایش دهید.

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

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

تجهیزات شبکه تندا
بهترین باربری های تهران
فروشگاه سيسمونى
کافی شاپ های تهران