آموزش ساخت بخش نمونه کار در وردپرس قسمت (1)

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

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

کار هایی که باید انجام شود شامل موارد زیر می باشد:

• ایجاد Post type قالب نمونه کار ها در سایت
• ساخت متاباکس گالری تصاویر برای قالب نمونه کارها ی سایت وردپرسی
• ساخت قالب برای برگه نمونه کار ها

در اولین قدم باید برای Post type قالب نمونه کار بسازید برای این کار به شکل زیر عمل کنید:

اگر با نحوه سایت Post type در وردپرس مشکل دارید می توانید بخوانید بعد از ساخت Post type وارد فایلهای قالب وردپرس خود شوید و فایل function.php را به حالت ویرایش در آورید و کد زیر را در آن جای گذاری کنید.

add_action('init', 'portfolio_register');

function portfolio_register() {
$args = array(
'label' => __('نمونه کارها'),
'singular_name' => __('Project'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'supports' => array('title', 'editor', 'thumbnail')
);

register_post_type( 'portfolio' , $args );

register_taxonomy("project-type", array("portfolio"), array("hierarchical" => true, "label" => "دسته بندی نمونه کارها", "singular_label" => "دسته بندی نمونه کارها", "rewrite" => true));
}

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

لازم به ذکر است که تمامی بخش های وردپرس نیاز به متاباکس دارد که در قالب وردپرس حرفه ای اکثریت آنها ایجاد شده حال اگر قالب شما بخش نمونه کار ندارد همان طور که در بالا گفتیم باید Post type بسازید و بخش نمونه کار را با کد داده شده به وردپرس خود اضافه کنید و بعد برای این بخش متاباکش ایجاد کنید برای این کار کد زیر را در فایل function.php قالب خود اضافه کنید.

add_action("admin_init", "portfolio_meta_box");
function portfolio_meta_box(){
add_meta_box("projInfo-meta", "لینک نمونه کار", "portfolio_meta_options", "portfolio", "side", "low");
}
function portfolio_meta_options(){
global $post;
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id;
$custom = get_post_custom($post->ID);
$link = $custom["projLink"][0];
?>
<label>لینک:</label><input name="projLink" value="<?php echo $link; ?>" />
<?php
}

add_action('save_post', 'save_project_link');

function save_project_link(){
global $post;

if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){
return $post_id;
}else{
update_post_meta($post->ID, "projLink", $_POST["projLink"]);
}
}

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

function portfolio_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];
}

function list_my_images_slots( $cpt = false ){
$list_images = apply_filters('list_images',array(
'image1' => '_image1',
'image2' => '_image2',
'image3' => '_image3',
'image4' => '_image4',
'image5' => '_image5',
'image6' => '_image6',
), $cpt );
return $list_images;

}

خب اگر قصد دارید تعداد تصاویز زیادتری استفاده کنید می توانید کد را دو مرتبه اضافه کنید . بعد کدی که در پایین قرار دادیم را اضافه کنید.

add_action("admin_init", "add_image_metabox");
function add_image_metabox(){
add_meta_box('elnazimage', __('تصاویر نمونه کار'), "elnazimage", 'portfolio', 'normal', 'core');
}

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

add_action('save_post', 'save_image_metabox');
function save_image_metabox($post_ID){
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
return $post_id;

$list_images = list_my_images_slots();
foreach($list_images as $k => $i){
if ( isset( $_POST[$k] ) ) {
check_admin_referer('image-liee-save_'.$_POST['post_ID'], 'image-liee-nonce');
update_post_meta($post_ID, $i, esc_html($_POST[$k]));
}
}
}

در نوبت بعدی باید برای متاباکس ایجاد و ساخته شده استایل تعریف کنید برای این کار می توانید از استایل زیر استفاده کنید و آن را به قالب خود اضافه کنید.

/**
// فراخوانی اسکریپت های مورد نیاز
*/
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
}