Thêm nút Publish/Update vào Admin Bar trong WP Admin [NEW]

Bài này của Minh Khôi tại megamehay.com gửi cho Thachpham.com

Có nút Xuất bản / Cập nhật trong tầm mắt của bạn sẽ là một điều tuyệt vời thay vì bạn phải kéo chuột lên đầu chỉ để nhấp vào nút Xuất bản / Cập nhật sau khi kết thúc một bài đăng dài. Sự tiện lợi này sẽ càng rõ ràng hơn nếu bạn phải soạn thảo các bài viết có khá nhiều Metabox dài như WordPress Seo by Yoast. Với bài viết này, tôi sẽ giúp bạn thêm nút “Đăng” để Thanh công cụ quản trị sẵn sàng sử dụng.

Khi nói đến việc thêm liên kết vào Thanh công cụ dành cho quản trị viên, nhiều người trong số các bạn có thể nghĩ đến chức năng add_menu(), nhưng tiếc là nó không giải quyết được vấn đề nếu bạn không thêm hàng tá câu lệnh và các điều kiện dài dòng khác. Giải pháp nhanh chóng và đơn giản là: “ở đâu có nút gửi, chúng tôi copy và đưa lên”.

Thêm nút Publish/Update vào Admin Bar trong WP Admin [NEW]

Vì vậy, tôi quyết định sử dụng javascript để đọc và thêm một nút vào Thanh công cụ quản trị như hình dưới đây.

Với cách này, bạn có thể biết một cách khác để chèn liên kết vào Thanh công cụ quản trị.

Đầu tiên, bạn tạo một tệp có tên editpost.js trong thư mục chủ đề và sao chép đoạn mã Javascript sau vào đó:


(function($) {

$.fn.extend({

duplicateButton: function ()
{
if ( $(this).length )
{
$(‘li#wp-admin-bar-google-tools’).after(‘<li id="wp-admin-bar-publish-button"><a class="ab-item" href="#" id="tpb_publish" for="’ + $(this).attr(‘id’) + ‘"><span class="ab-icon"></span><span class="ab-label">’ + $(this).val() + ‘</span></a></li>’);
return true;
}
return false;
}

});

$(function(ready)
{
var button = $(‘input[type="submit"].button-primary, input[type="button"].button-primary, input[type="submit"].acf-button’);

if ( button.is(‘:visible’) && !button.is("#bulk_edit") )
{
if ( !button.attr(‘id’) )
button.first().attr(‘id’,’tpb_publish’);
button.first().duplicateButton();
}

$(‘li#wp-admin-bar-publish-button a’).click(function(e)
{
e.preventDefault();
$(‘#’+$(this).attr(‘for’)).click();
});
});

})( jQuery );

Bạn có nhận thấy đoạn văn không? li#wp-admin-bar-google-tools trong đoạn mã trên. Điều này có nghĩa là tôi sẽ chỉ định vị trí mà bạn muốn đặt menu phía sau nó. Bạn hãy đổi đoạn văn đó thành ID của menu cần chèn sau đó, để lấy ID, bạn chỉ cần đưa chuột vào vị trí menu cần lấy, nhấp chuột phải và chọn Kiểm tra phần tử.

liid

Với Javascript trên thì công việc gần như đã xong, bây giờ bạn có thể chèn nó vào WP Admin một lần nữa. Chèn phần sau vào tệp functions.php của chủ đề:


function mgh_admin_enqueue_script() {
wp_enqueue_script( ‘toolbar-publish-button’, get_template_directory_uri().’/editpost.js’, array(‘jquery’) );
}
add_action( ‘admin_init’, ‘mgh_admin_enqueue_script’ );

Để có biểu tượng phía trước nút như trong hình, bạn tạo một file .css lưu trong thư mục theme với nội dung như sau:

#wpadminbar #wp-admin-bar-publish-button .ab-icon:before {
content: ‘f147’;
top: 4px;
}

Giống như file.js ở trên, bạn cần gọi nó trong WP Admin bằng cách sử dụng tệp functions.php:


function mgh_admin_enqueue_style() {
wp_enqueue_style( ‘toolbar-publish-button-css’, get_template_directory_uri().’/file.css’ );
}
add_action( ‘admin_init’, ‘mgh_admin_enqueue_style’ );

Hãy nhớ thay thế file.css bằng tên của tệp .css bạn vừa tạo.

OK xong! Bây giờ ở bất kỳ đâu trong wp-admin đều có nút gửi, cập nhật, xuất bản, javascript ở trên sẽ sao chép và cho phép bạn điều khiển nút đó “từ xa”. Hy vọng bạn tiết kiệm được nhiều thời gian quý báu và bảo vệ con lăn chuột mỏng manh của bạn.

Đánh giá nội dung này