سلام و عرض ادب و احترام خدمت شما دوستان عزیز و همراهان ارجمند
در ادامه سری آموزش های هک وردپرس در خدمت شما عزیزان هستیم با یکی دیگر از این آموزش های مهم در وب سایت وردپرسی.در این قسمت از آموز های وبسایت وردپرسی در مورد روش ساختت بخش نمونه کار در وب سایت صحبت میکنیم و به بررسی جامع و کامل آن در وب سایت های وردپرسی میپردازیم.
دوستان عزیز در این آموزش وردپرس موارد زیر را مورد بررسی قرار خواهیم داد:
1. post type نمونه کار را بسازیم و به صورت کامل بررسی کنیم
2. متاباکس گالری تصاویر را بسازیم و تنظیمات آن را بررسی کنیم
3. قالب برگه برای نمایش نمونه کارها را بسازیم.
دوستان عزیز در ابتدای این آموزش باید بهش ما بگویم که برای درک صحیح این اموزش باید حتما به برنامه نویسی ورپرس مسلط باشید دوستان
خب برای شروع ابتدا post type نمونه کار را میسازیم.که برای این منظور شما دوستان عزیز میتوانید از کد زیر استفاده کنید:
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));
}
حال فایل را ذخیره سازی کرده و وارد بخش پیشخوان وب سایت وردپرسی خود شوید.حال میبینید که یک بخش به نام نمونه کار به قهرست های موجود در این قسمت وب سایت وردپرسی شما افزوده شده است.حال قدم بعدی در انجام این کار، ساخت متاباکس مناسب برای بخش نمونه کارها وردپرس است.
خب برای این منظور میتوانید از کد زیر استفاده نمائید.
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){
// on retourne rien du tout s'il s'agit d'une sauvegarde automatique
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
}
سخن آخر
دوستان عزیز در صورتی که توجه کرده باشید تا به اینجای کار ابتدا قسمت post type بخش نمونه کار را ساختیم و پس از ساخت آن قسمت در وب سایت وردپرسی و آزمایش صحیح بودن ان پرداختیم به ساختن متاباکس برای موارد قبلی ساخته شده و سپس ان را نیز به صورت کامل مورد بررسی و تحلیل قرار داده و تمامی کد های آن را آوردیم و پس از این مرحله تصاویر را نیز به ایم متاباکس ها اضافه کردیم و یک استایل نیز برای زیبایی و مرتب بودن ان ها قرار دادیم و سپس اسکریپت ها و استایل های تعریف شده را برای باکس های اپلود در بخش نمونه کار ها فراخوانی کردیم.حال این قسمت از این اموزش به پایان رسید و در قسمت بعدی با آموزش ادامه موارد موحود در خدمت شما عزیزان و همراهان هستیم.
دوستان عزیز همانطور که پیشتر نیز گفتیم لازمه درک صحیح و یادگیری درست این آموزش های هک وب سایت های وردپرسی یادگیری برنامه نویسی وردپرس است که در صورت عدم دانستن ان نمیتوانید به صورت کامل و درست این اموزش ها را فراگیرید.البته نکته مهمی هم که در اینجا وجود دارد این است که شما باید قبل از هر چیز و هر اعمال تغییراتی در وب سایت وردپرسی و کد های وب سایت وردپرسی خود از آن ها نسخه پشتیبان تهیه نمائید.
ممنونم از همراهی شما دوستان عزیز و همراهان ارجمند
در ادامه این سری از آموزش ها نیز همراه من باشید
منبع: بیگ تم مرجع آموزش هک وردپرس و آموزش امنیت وردپرس
دیدگاهتان را بنویسید