WordPress Temalarına İpucu Nasıl Eklenir?

wordpresstr · 30 Kas 2020

Tek yapmanız gereken aşağıdaki kodu almak ve tooltip-testimonials.php adında boş bir php dosyasına veya bunun için başka bir adla kaydetmek.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

<?php
/*
Plugin Name: Tooltip Testimonial
Plugin URI: https://www.wpbeginner.com/
Description: Tooltip Testimonial in WordPress
Version: 0.1
Author: Syed Balkhi
Author URI: https://www.wpbeginner.com/
License: GPL v2 or higher
License URI: License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

//Add Image Size
add_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode

//Register Custom Post Types

add_action( 'init', 'register_cpt_testimonial' );

function register_cpt_testimonial() {

$labels = array(
'name' => _x( 'Testimonials', 'testimonial' ),
'singular_name' => _x( 'testimonial', 'testimonial' ),
'add_new' => _x( 'Add New', 'testimonial' ),
'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
'new_item' => _x( 'New testimonial', 'testimonial' ),
'view_item' => _x( 'View testimonial', 'testimonial' ),
'search_items' => _x( 'Search Testimonials', 'testimonial' ),
'not_found' => _x( 'No testimonials found', 'testimonial' ),
'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
'menu_name' => _x( 'Testimonials', 'testimonial' ),
);

$args = array(
'labels' => $labels,
'hierarchical' => false,

'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),

'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);

register_post_type( 'testimonial', $args );
}

//Custom Meta Box

$key = "testimonial";
$meta_boxes = array(
"position" => array(
"name" => "position",
"title" => "Position and Company",
"description" => "Enter their position and their company name.")
);

function create_meta_box() {
global $key;

if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}

function display_meta_box() {
global $post, $meta_boxes, $key;
?>

<div class="form-wrap">

<?php
wp_nonce_field( plugin_basename( FILE ), $key . '_wpnonce', false, true );

foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>

<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>

<?php } ?>

</div>
<?php
}

function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;

foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}

if ( !wp_verify_nonce( $POST[ $key . 'wpnonce' ], plugin_basename(__FILE) ) )
return $post_id;

if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;

update_post_meta( $post_id, $key, $data );
}

add_action( 'admin_menu', 'create_meta_box' );
add_action( 'save_post', 'save_meta_box' );

Bu bize, başlamamız gereken temel WordPress kurulumunu sağlayacaktır. Şimdi, görüntüleyebilmek için bazı referanslar eklemeye başlamalısınız. Her bir öğenin nereye gittiğini özetleyelim.

Kullanıcının Fotoğrafını Ekleyin (Küçük Resimler / Öne Çıkan resim). Onu 96 x 96 piksel olarak yeniden boyutlandırmak için ayarladık. Bu oranı takip etmek her zaman en iyisidir.
Kullanıcının adını ekleyin (Gönderi Başlığı)
Referans Metni Ekle (Gönderi Metni)
Müşterinin Şirketteki Pozisyonu (Referans Bilgileri Meta Kutusunda)

Temada Görüntüleniyor
Araç ipucu referansları çoğunlukla özel temalar için tasarlanmıştır, bu nedenle evet, bazı tema düzenlemeleriyle ellerinizi kirletmeniz gerekecektir. Her temanın farklı boyutları, renk şemaları ve stilleri olduğundan, bunu bir eklenti yerine bir öğretici olarak yayınlamaya karar verdik. WordPress temanızda araç ipucu referanslarını görüntülemek için yapacağımız şey:

Temaya özel bir jQuery kodu ekleyin.
Referansları istediğimiz bir yapıda gösterecek özel bir döngü oluşturun.
Güzel görünmesi için bazı temel CSS'ler ekleyin

Yapmanız gereken ilk şey, aşağıdaki jQuery kodunu kopyalayıp yapıştırmak ve tooltip-testimonials.js adlı boş bir dosyaya kaydetmektir :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery(document).ready(function(){

jQuery("#testimonials img[title]").tooltip({

// tweak the position
offset: [0, 0],

// use the "slide" effect
effect: 'slide'

// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });

});

Bunu yaptıktan sonra, bu dosyayı temanızın başlığına yüklememiz gerekir. Bunu, header.php dosyanızı düzenleyerek ve baş bölgenize bir komut dosyası kodu yapıştırarak manuel olarak yapmayı seçebilir veya WP en iyi uygulamasını izleyerek wp_enqueue_script işlevini kullanabilirsiniz. Devam edelim ve tooltip-testimonials.js dosyamızı temamızın betikler klasörüne yükleyelim. Mevcut değilse, komut dosyaları adlı bir klasör oluşturun.
Aşağıdaki kodu temanızın functions.php dosyasına ekleyin:

1
2
3
4
5
6
7
8
9
10

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);
wp_enqueue_script('jquery_tools');

wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
wp_enqueue_script('tooltip');
}
}

Şimdi bunu yerine getirdik, bu araç ipucu referanslarını kullanıcı resimleri ile ızgara tabanlı bir formatta görüntülememize izin verecek özel bir döngü oluşturalım. Bu referansların görünmesini istediğiniz dosyayı açın. Kenar çubuğunuz, ana sayfanız veya istediğiniz herhangi bir yer olsun. Ardından aşağıdaki döngüyü yapıştırın:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="testimonials">
<div class="wrap">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 6 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
$user_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID), 'testimonial-thumb');
?>
<div class="testimonials">
<p class="center"><img class="frame" src="<?php echo $user_image_url[0] ?>" title="<?php echo get_the_content(); ?>" alt="<?php echo get_the_title(); ?>" /></p>
<p class="testimonials-title"><?php echo get_the_title(); ?></p>
<p class="company"><?php echo $data[ 'position' ]; ?></p>
</div>
<?php
endwhile;
endif; ?>

</div>
</div>

Yukarıdaki döngü kodu sayfada 6 öğe gösterecektir. Onları istediğiniz gibi şekillendirebilirsiniz. 20 kadar referansınız varsa orderby = rand bile ekleyebilirsiniz. Rastgele görüntülenen 6'nız olabilir.
Şimdi güzel görünmesi için bazı CSS stilleri ekleyelim. Aşağıda, kullandığımız bazı örnek CSS'ler verilmiştir. Muhtemelen tema stillerinize, renk şemalarınıza vb. Göre ayarlamanız gerekir.

1
2
3
4
5
6
7
8
9
10
11

#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}

#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}

#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}

#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}

#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}

#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}

Ara

Hoşgeldin Ziyaretçi

WordPress Temalarına İpucu Nasıl Eklenir?

wordpresstr

Administrator

Hakkımızda

Hızlı Linkler

Ekstra Linkler