Solusi untuk membuat Shortcode di Admin Editor

Saya telah menanyakan pertanyaan ini sekitar setahun yang lalu dan saya berharap ada beberapa jenis solusi sederhana yang akan memungkinkan saya mencapai tujuan saya. Jadi begini:

Saya sering menggunakan kode pendek dalam Editor Admin tetapi ketika saya menyerahkannya kepada klien, mereka sering tidak mengerti cara kerjanya.

Apa yang saya cari adalah solusi yang secara otomatis akan membuat output yang terkait dari shortcode dalam admin admin WYSIWYG.

Dari perspektif visual, saya ingin ini ditampilkan serupa ketika garis "lebih" muncul atau ketika gambar ditampilkan dalam editor. Maksud saya, pengguna akan melihat output tetapi hanya akan dapat menghapusnya tetapi tidak mengedit konten dari shortcode yang diberikan.

functions editor shortcode

— NetConstructor.com
sumber

Sudahkah Anda membaca artikel ini ( wp.tutsplus.com/tutorials/theme-development/… )? Periksa bagian TinyMCE.

— cr0z3r

Saya telah membaca itu tetapi sejauh yang saya tahu itu hanya berurusan dengan membuat / mendaftarkan kode pendek dan membuat tombol untuk editor dengan cepat memasukkan kode pendek ... Tapi tidak ada info tentang membuat kode pendek dengan rekan-rekan blok HTML seperti yang saya jelaskan.

— NetConstructor.com

Maksud Anda bahwa Anda ingin menyertakan alat bantu visual yang mewakili kode pendek apa pun yang Anda sertakan, dan tidak benar-benar mengganti kode pendek dengan HTML real-deal? yaitu penampung galeri, yang sebenarnya bukan kode galeri, melainkan penampung visual yang hanya membiarkan pengguna tahu, "Hei, ada galeri di sini"?

— Matius Boynes

Persis! Dan saya ingin itu menjadi sedikit fleksibel sehingga memungkinkan saya untuk menyesuaikannya berdasarkan kode pendek per (mirip seperti yang Anda katakan galeri atau ketika gambar disertakan)

— NetConstructor.com

wordpress.org/plugins/shortcode-ui

— jgraup

Jawaban:

Sebenarnya tidak terlalu buruk untuk melakukan apa yang Anda minta. Ini akan membawa Anda sekitar satu jam untuk melakukan yang pertama, dan 10 menit untuk melakukan yang berikutnya.

Pada akhirnya apa yang akan Anda lakukan adalah membuat plugin TinyMCE. Inilah yang harus Anda lengkapi dengan diri Anda sendiri untuk memulai:

Panduan umum untuk membuat plugin tinymce
Contoh kode dari WordPress Core
Panduan umum tentang menambahkan plugin TinyMCE ke WordPress. Saya menemukan ini , yang tampaknya memadai.

Anda sekarang memiliki semua alat untuk menyelesaikannya! Dari semua ini, kode yang paling menarik bagi Anda adalah blok ini dalam kode contoh WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Di sini, kode pendek untuk galeri diganti dengan imgtag. The imgtag memiliki kelas wp-gallery, yang akan ditata oleh CSS ditemukan di sini .

Edit 2016-04-06: Konten dan tautan terbaru untuk TinyMCE 4 dan WordPress 4.4

— Matthew Boynes
sumber

menarik! izinkan saya bertanya kepada Anda ... apa pendapat Anda bahwa konten yang sebenarnya dari semua kode pendek secara otomatis dikonversi menjadi konten yang terkait?

— NetConstructor.com

Itu semua akan tergantung pada konten. Pertama, ingatlah bahwa beberapa HTML dilucuti, mengalami kesulitan rendering di TinyMCE, dll. Kedua, katakanlah kode pendek Anda membuat blok HTML yang kompleks - jika pengguna Anda mengeditnya, mereka secara tidak sengaja dapat merusaknya. Ketiga, jika kode pendek Anda memiliki opsi, opsi-opsi itu sekarang dibuat tidak dapat diedit kecuali jika Anda membunuh seluruh blok HTML dan mengulang kembali kode pendek itu. Kemungkinannya adalah, jika kode Anda cukup kompleks sehingga Anda memerlukan kode pendek, saya pikir placeholder adalah taruhan terbaik Anda.

— Matthew Boynes

apakah Anda pernah melihat solusi oleh orang lain dalam hal ini?

— NetConstructor.com

Ini bukan jawaban yang lengkap, hanya arahan desain. Saya pikir pendekatan terbaik adalah sesuatu seperti ini:

Di pos edit admin

Rip semua kode pendek dari pos tersimpan dan render di dalam kotak metabox, selain dari editor . Buat shure mereka muncul dalam urutan yang sama seperti shortcode terjadi di Editor kecil.

Dalam API javascript tinyMCE

Membuat fungsi jQuery, ketika pengguna mengklik kode pendek, itu menukar HTML dari metabox ke editor. Dan sebaliknya. Urutan itu sendiri harus ok sebagai asosiasi, tetapi saya tidak yakin tentang melampirkan kode pendek. Namun ada banyak cara untuk mendesain koneksi ID yang bagus. Pembaruan kode pendek dapat dilakukan dengan cepat menggunakan ajax.

Jangan pernah menyimpan status kode pendek yang diberikan

Sebelum beralih editor, simpan konsep, autodraft, dan publikasikan, buat panggilan API untuk memicu pemulihan, sehingga status kode pendek yang diberikan tidak pernah disimpan ...

Ini bisa dilakukan, tetapi Anda harus terbiasa dengan API tinyMCE untuk memahami di mana dan kapan untuk mengakses konten editor, dan menghubungkan ke tindakan javascript sebelum 'save' dan banyak lagi.

Mungkin ada beberapa editor mungMCE pada pageload edit postingan yang sama.

Bagian pemulihan dapat diselidiki dengan melihat [gallery]kode pendek beaviour. Tetapi klik pada [MY_SHORTCODE]harus dilakukan oleh beberapa trik jQuery.

di skrip admin_footer, akses konten tempat kursor aktif dengan:

var $editor_content = $(tinymce.activeEditor.getBody());

adalah petunjuk bagaimana memulai.

— Jonas Lundman
sumber

Saya juga sedang mencari cara untuk menampilkan dan mengubah kode pendek. Dan sekarang, akhirnya, saya menemukan tutorial yang tidak persis seperti itu: https://generatewp.com/take-shortcodes-ultimate-level/

Saya menambahkan deskripsi sehingga mesin pencari mengambilnya:

Kita akan membuat plugin sederhana dengan kode pendek, lalu kita akan menambahkan tombol editor TinyMCE untuk menyisipkan kode pendek itu melalui popup yang akan mengumpulkan semua input pengguna untuk atribut kode pendek. Kemudian, kita akan mengganti kode pendek di editor TinyMCE dengan gambar placeholder, seperti galeri asli WordPress (yang sebenarnya adalah kode pendek, jika Anda tidak tahu), dan terakhir - kita akan mengizinkan pengeditan kode pendek dan atributnya dengan mengklik dua kali pada gambar placeholder.

— Marc Chéhab
sumber