خانه / وردپرس / آموزش وردپرس / آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت سوم

تاریخ انتشار: شهریور 2, 1394 تعداد بازدید: 399 بازدید تعداد دیدگاه ها: 0

آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت سوم

آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت سومReviewed by فریش تم on Aug 24Rating: 5.0آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت سومدرادامه آموزش ساخت بخش نمونه کار در وب سایت وردپرس در قسمت های قبل در مورد ساخت post Type و متاباکس هایی برای برگه نمونه کار در قالب وردپرس صبحت کردیم

سلام و عرض ادب و احترام خدمت شما دوستان عزیز
در ادامه آموزش ساخت بخش نمونه کار در وب سایت وردپرس همراه شما هستیم و در قسمت های قبل در مورد ساخت post Type و متاباکس هایی برای برگه نمونه کار در قالب وردپرس صبحت کردیم و حال در این آموزش به ادامه کار میپردازیم پس تا انتها همراه من باشید

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

/**
// فراخوانی اسکریپت های مورد نیاز
*/
function elnazimage($post){
	$list_images = list_my_images_slots();

	wp_enqueue_script( 'media-upload' );
	wp_enqueue_script( 'thickbox' );
	wp_enqueue_script( 'quicktags' );
	wp_enqueue_script( 'jquery-ui-resizable' );
	wp_enqueue_script( 'jquery-ui-draggable' );
	wp_enqueue_script( 'jquery-ui-button' );
	wp_enqueue_script( 'jquery-ui-position' );
	wp_enqueue_script( 'jquery-ui-dialog' );
	wp_enqueue_script( 'wpdialogs' );
	wp_enqueue_script( 'wplink' );
	wp_enqueue_script( 'wpdialogs-popup' );
	wp_enqueue_script( 'wp-fullscreen' );
	wp_enqueue_script( 'editor' );
	wp_enqueue_script( 'word-count' );
	wp_enqueue_script( 'img-mb', get_template_directory_uri() . '/js/get-images.js', array( 'jquery','media-upload','thickbox','set-post-thumbnail' ) );
	wp_enqueue_style( 'thickbox' );

	wp_nonce_field( 'image-liee-save_'.$post->ID, 'image-liee-nonce');

	echo '<div id="droppable">';
	$z =1;
	foreach($list_images as $k=>$i){
		$meta = get_post_meta($post->ID,$i,true);
		$img = (isset($meta)) ? '<img src="'.wp_get_attachment_thumb_url($meta).'" width="100" height="100" alt="" draggable="false">' : '';
		echo '<div class="image-entry" draggable="true">';
		echo '<input type="hidden" name="'.$k.'" id="'.$k.'" class="id_img" data-num="'.$z.'" value="'.$meta.'">';
		echo '<div class="img-preview" data-num="'.$z.'">'.$img.'</div>';
		echo '<a href="javascript:void(0);" class="get-image button-secondary" data-num="'.$z.'">'._x('Add New','file').'</a><a href="javascript:void(0);" class="del-image button-secondary" data-num="'.$z.'">'.__('Delete').'</a>';
		echo '</div>';
		$z++;
	}
	echo '</div>';
	?>

	<div style="clear:left;"></div>
	<script>jQuery(document).ready(function($){
		function reorderImages(){
			//reorder images
			$('#droppable .image-entry').each(function(i){
				//rewrite attr
				var num = i+1;
				$(this).find('.get-image').attr('data-num',num);
				$(this).find('.del-image').attr('data-num',num);
				$(this).find('div.img-preview').attr('data-num',num);
				var $input = $(this).find('input');
				$input.attr('name','image'+num).attr('id','image'+num).attr('data-num',num);
			});
		}

		if('draggable' in document.createElement('span')) {
			function handleDragStart(e) {
			  this.style.opacity = '0.4';  // this / e.target is the source node.
			}

			function handleDragOver(e) {
			  if (e.preventDefault) {
			    e.preventDefault(); // Necessary. Allows us to drop.
			  }
			  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
			  return false;
			}

			function handleDragEnter(e) {
			  // this / e.target is the current hover target.
			  this.classList.add('over');
			}

			function handleDragLeave(e) {
				var rect = this.getBoundingClientRect();
	           // Check the mouseEvent coordinates are outside of the rectangle
	           if(e.x > rect.left + rect.width || e.x < rect.left
	           || e.y > rect.top + rect.height || e.y < rect.top) {
	               this.classList.remove('over');  // this / e.target is previous target element.
	           }
			}

			function handleDrop(e) {
			  // this / e.target is current target element.
			  if (e.stopPropagation) {
			    e.stopPropagation(); // stops the browser from redirecting.
			  }
			  // Don't do anything if dropping the same column we're dragging.
			  if (dragSrcEl != this) {
			    // Set the source column's HTML to the HTML of the column we dropped on.
			    dragSrcEl.innerHTML = this.innerHTML;
			    this.innerHTML = e.dataTransfer.getData('text/html');
			    reorderImages();
			  }
			  // See the section on the DataTransfer object.
			  return false;
			}

			function handleDragEnd(e) {
			  // this/e.target is the source node.
			  this.style.opacity = '1';
			  [].forEach.call(cols, function (col) {
			    col.classList.remove('over');
			  });
			}

			var dragSrcEl = null;

			function handleDragStart(e) {
			  // Target (this) element is the source node.
			  this.style.opacity = '0.4';
			  dragSrcEl = this;
			  e.dataTransfer.effectAllowed = 'move';
			  e.dataTransfer.setData('text/html', this.innerHTML);
			}

			var cols = document.querySelectorAll('#droppable .image-entry');
			[].forEach.call(cols, function(col) {
			  col.addEventListener('dragstart', handleDragStart, false);
			  col.addEventListener('dragenter', handleDragEnter, false);
			  col.addEventListener('dragover', handleDragOver, false);
			  col.addEventListener('dragleave', handleDragLeave, false);
			  col.addEventListener('drop', handleDrop, false);
	  		  col.addEventListener('dragend', handleDragEnd, false);
			});
		}else{
			  $( "#droppable" ).sortable({
			  	opacity: 0.4, 
			    cursor: 'move',
			    update: function(event, ui) {
			    	reorderImages()
			    }
			  });
		}
	});</script>
	<style type="text/css">
	[draggable] {
	  -moz-user-select: none;
	  -khtml-user-select: none;
	  -webkit-user-select: none;
	  user-select: none;
	}
	.img-preview{
		position:relative;
		display:block;
		width:100px;
		height:100px;
		background:#efefef;
		border:1px solid #FFF;
	}
	.img-preview img{
		position:absolute;
		top:0;
		left:0;
	}
	.image-entry{
		float:left;
		margin:0 10px 10px 0;
		border:2px solid #ccc;
		padding:10px;
		background:#FFF;
	}
	.image-entry:last-child{margin-right:0;}
	.image-entry.over{
		border: 2px dashed #000;
	}
	.get-image,.del-image{
		margin-top:10px !important;
		display:block !important;
	}
	</style>
	<?php
}

خب پس از طی این مرحله نفسگیر باید کمی استراحت کرد پس در ادامه قسمت بعد همراه من باشید برای ادامه کار

از همراهی شما عزیزان ممنونم
شما میتوانید قسمت های دیگر این آموزش را از لینک های زیر دریافت نمائید

آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت اول
آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت دوم
آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت چهارم
آموزش ساخت بخش نمونه کار در وب سایت وردپرس،قسمت پنجم

منبع: فریش تم ارائه دهنده: قالب وردپرس ، پوسته وردپرس ، افزونه وردپرس

کانال تلگرام فریش تم
  • دیدگاه شما پس از تایید در سایت نمایش داده می شود.
  • از ارسال متن بصورت فینگلیش خودداری نموده و فارسی تایپ کنید.
  • دیدگاه و سوالات شما توسط کارشناسان ما بین 1 تا 12 ساعت پاسخ داده خواهد شد.
  • از ارسال دیگاه جهت پشتیبانی محصولات تجاری پرهیز و برای پشتیبانی از بخش پشتیبانی سایت اقدام فرمائید

هنوز دیدگاهی ثبت نشده است.