Ingin tahu cara paling mudah untuk menampal kod ke dalam laman WordPress anda supaya anda boleh menyalinnya terus dari artikel?

Saya mahu memikirkan perkara ini.

Apabila anda menjalankan tapak web anda pada WordPress CMS (enjin), anda perlu sentiasa memperbaikinya dan menambah fungsi baharu dan berguna yang terdapat pada blog lain yang serupa.

Anda tidak boleh ketinggalan!

Untuk melakukan ini, kadangkala anda perlu memasukkan kod tambahan di sana. Saya secara khusus menerbitkan artikel terperinci di laman web saya di mana saya bercakap tentang semua perubahan yang saya buat pada tema WordPress saya (template) supaya ia tidak tersesat. Lagipun, jika templat ditukar, pelarasan ini perlu dibuat semula.

Di samping itu, saya mempunyai satu yang istimewa yang dipasang di blog saya. Ngomong-ngomong, di sana anda boleh menemui pautan ke artikel yang menerangkan kegunaan pemalam ini dan cara terbaik untuk memasang dan mengkonfigurasinya.

Saya gembira untuk berkongsi maklumat berguna yang telah saya pelajari. Dan saya cuba membentangkan segala-galanya dalam bahasa yang mudah dan mudah difahami supaya ia boleh diakses walaupun kepada pemula.

Tetapi kadangkala saya perlu menambah ilustrasi yang menunjukkan cara saya menukar kod di tapak saya.

Sehingga kini, saya hanya menggunakan satu kaedah untuk ini: memasukkan foto skrin komputer saya.

Tetapi anda boleh melihat dengan jelas kod dalam gambar, tetapi anda tidak boleh menyalinnya. Dalam kes ini, ia mesti dimasukkan secara manual. Ini bermakna kesilapan dan salah faham adalah mungkin.

Oleh itu, untuk memudahkan tugasan untuk pembaca saya, saya memutuskan untuk memikirkan cara menampal kod tersebut ke dalam laman WordPress supaya sesiapa sahaja boleh menyalinnya dengan mudah.

Ramai orang merujuk kepada pemalam:
Sintaks WP bersempena dengan Butang Sintaks WP;
SyntaxHighlighter Evolved ;
Auto Syntax Highlighter.

Saya menemui penerangan tentang cara memasukkan kod tanpa pemalam. Untuk melakukan ini, kami menggunakan tag xmp (pembukaan dan penutup). Tetapi kini ia sudah lapuk, dan disyorkan untuk menggunakan teg pra (pembukaan dan penutup) dalam HTML sebaliknya.

Tetapi saya tidak dapat memasukkan kod program ke dalam artikel hanya menggunakan teg pra atau xmp khas. Saya juga cuba meletakkannya dalam bekas div. Dan saya menyalin frasa penuh daripada tapak yang mengesyorkannya.

Percubaan gagal. Kod tidak disimpan semasa mengedit dalam mod HTML. Apabila menukar tab (Visual/Teks), ia hilang begitu sahaja daripada teks artikel. Atas sebab tertentu ini tidak berfungsi. Siapa tahu, tulis.

Saya mendapat maklumat bahawa ini hanya boleh dilakukan selepas memasang pemalam WP Syntax. Itu. Anda masih tidak boleh melakukannya tanpa pemalam. Saya memasang versi terkini WordPress (pada masa itu - 4.3.1).

Tetapi anda boleh melakukannya dengan cara ini. Kami melihat kod yang dimasukkan pada beberapa tapak, klik kanan padanya untuk memilih "lihat kod elemen" daripada menu konteks dan melihat kod tersebut. Dengan cara ini anda boleh mengetahui cara ia dimasukkan.

Oleh itu, saya menentukan bahawa pada salah satu tapak yang saya tahu, kod itu telah dimasukkan menggunakan pemalam Crayon Syntax Highlighter.

Saya menemui pemalam ini dengan mencari dalam panel pentadbir dan memasangnya pada blog latihan.

Ia ternyata sangat mudah digunakan. Saya tidak menukar sebarang tetapan, walaupun terdapat banyak tetapan. Saya meninggalkan segala-galanya secara lalai (seperti yang dikonfigurasikan oleh pengarang sendiri).

Selepas memasang dan mengaktifkan pemalam, dalam mod penyuntingan artikel, butang khas muncul dalam menu, dengan mengklik yang anda boleh menampal kod itu ke laman web WordPress.

Tetingkap muncul untuk memasukkan kod.

Dan kemudian sesiapa sahaja boleh memilih dan menyalin sekeping kod ini untuk meningkatkan fungsi blog mereka sendiri.

Kod itu ternyata sangat berwarna-warni. Unsur-unsurnya diserlahkan dalam warna yang berbeza. Ia adalah mungkin untuk menyesuaikan semua ini untuk diri sendiri.

Segala-galanya ternyata sangat mudah sehingga saya memutuskan untuk tidak mencari yang lebih baik.

Dan sekarang, pembaca yang dihormati, anda boleh dengan mudah menyalin kod program dari tapak saya.

Sebagai contoh, yang ini.

Kod fungsi untuk menyembunyikan log masuk pentadbir laman WordPress dalam ulasan

add_filter("comment_class", "udalit_class_avtora_kommentariya"); function udalit_class_avtora_kommentariya($klassi)( foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]);endif; endforeach; pulangkan $classi; )

Dalam tutorial kami, kami sering memberikan contoh cara untuk menambah baik dan mengembangkan ciri terbina dalam WordPress. Selalunya ini hanyalah penerangan tentang menyediakan pemalam atau widget yang menarik, dan selalunya kami menyediakannya dalam teks coretan kod, yang perlu dimasukkan ke dalam satu atau yang lain fail tema untuk mencapai hasil yang diinginkan.

Ternyata, bagi kebanyakan frasa - Tampalkan kod ini ke dalam functions.php- tidak mengatakan apa-apa, jadi dalam tutorial ini saya akan cuba menunjukkan dengan cara yang paling mudah apa kod ini dan bagaimana sebenarnya ia perlu ditambahkan pada fail tema anda. Siaran ini lebih kepada pemula, jadi jika anda seorang profesional WordPress, anda tidak akan melihat sesuatu yang baharu di sini.

Jadi, mari pergi!

Bagaimana untuk mengedit kod?

Saya tidak akan membebel terlalu banyak. Saya akan katakan secara ringkas, anda ada 2 pilihan:

1. Editor WordPress terbina dalam

Terletak dalam Konsol dalam menu Penampilan → Editor.

• kebaikan: sentiasa di tangan, anda boleh dengan cepat membuat perubahan kecil pada kod, dengan syarat anda tahu dengan tepat ke mana anda pergi.
• Minus: tidak semua fail tema tersedia untuk diedit dan sintaks tidak diserlahkan, menjadikan editor ini tidak sesuai untuk kerja serius dengan kod.

2. Program pihak ketiga untuk menyunting kod

Untuk Windows saya guna Notepad++ Dan Adobe Dreamweaver. Untuk MacOS Saya boleh menasihati Coda, dan untuk Linux Saya tidak akan memberi sebarang nasihat, mereka ini sudah tahu dengan baik cara mengedit kod dengan lebih baik. :-)

• kebaikan: penanda yang jelas, mudah dan penonjolan sintaks. Contohnya, dalam Notepad++ Apabila anda mengklik pada mana-mana teg, teg penutupnya juga akan diserlahkan. Ia sangat selesa.
• Minus: Ini masih merupakan program berasingan yang anda perlu fikirkan sendiri. Sesetengah program adalah percuma dan ada yang berbayar.

Struktur umum tema WordPress

Fail tema

mana-mana laman WordPress(atau lebih tepat untuk dikatakan subjek, kerana tapak akan berfungsi apabila salah satu tema yang dipasang diaktifkan) sebenarnya satu set fail. Di suatu tempat di sisi penyedia pengehosan anda, fail ini diproses oleh pelayan, dan hasil siap dikembalikan ke monitor anda - tapak itu sendiri. Perkara yang anda lihat apabila anda mengakses alamat melalui pelayar web.

Dalam kes WordPress, set fail ini akan berbeza dalam setiap tema. Tetapi ada satu ciri umum: Set ini terdiri daripada fail dengan sambungan .php, .css Dan .js(WordPress sendiri ditulis sepenuhnya PHP, Jadi .php fail adalah bahagian utama mana-mana tema).

Setiap tema reka bentuk mesti ada set fail minimum untuk operasi yang betul dalam persekitaran enjin WordPress. Anda boleh membuka folder dengan tema aktif anda ( site_rootwp-contentthemesyour_theme) dan kemungkinan besar anda akan menemui semua fail ini di sana:

Penampilan tapak

Sekarang mari kita bercakap tentang struktur rupa laman WordPress. Untuk mengelakkan kekeliruan seperti " Saya ingin menambah perkara ini di sini"atau" Saya perlu memasukkan butang ini di sana", kawasan tertentu tema WordPress biasanya dipanggil dengan nama yang betul. Pelawat biasa yang mendarat di mana-mana tapak melihat apa yang dilihatnya: butang, panel, pengepala, pautan dan sebagainya. Seseorang yang lebih arif dalam WordPress melihat tapak ini dengan cara yang lebih berstruktur.

Kita ambil blog kita sebagai contoh. Inilah rupa halaman utamanya:

Saya sengaja mengarang imej itu supaya semua kawasan utama kelihatan.

Seperti yang anda lihat, halaman utama blog kami terdiri daripada 4 bahagian: topi, ruang bawah tanah, bahagian utama Dan bar sisi. Adalah adil untuk mengatakan bahawa struktur ini adalah yang paling biasa dalam kebanyakan tema WordPress.

Sekarang setelah anda mengetahui nama bahagian hadapan tapak WordPress, anda boleh menyebut: " Saya perlu menambah sepanduk lain dalam pengaki", atau " Saya mahu membenamkan widget dalam bar sisi", atau " Perlu menukar susunan menu dalam pengepala".

Lebih lanjut mengenai fail dan kod

Dalam imej di atas anda dapat melihat bahawa setiap kawasan tapak bertanggungjawab untuk yang tertentu fail dalam folder tema. Awak nampak 4 kawasan, yang sepadan dengan 4 fail, tetapi sebenarnya terdapat lebih banyak fail. Saya hanya akan menerangkan fail tema yang paling penting.

header.php - Pengepala

Tudung- ini adalah kawasan teratas tapak, yang mengandungi logo, Nama tapak, navigasi atas menu, iklan tambahan boleh dimasukkan sepanduk, selamat muka surat. Ini adalah kawasan atas (pertama), jadi fail ini akan diproses terlebih dahulu. Ini bermakna bahawa fail header.php semua bersambung JavaScript fail, CSS fail dan sebagainya.

Serpihan fail:

footer.php - Footer

Sama seperti pengepala, ini adalah bahagian bawah tapak yang boleh mengandungi hak cipta, Maklumat perhubungan, tambahan menu, pembilang metrik dan sebagainya. Jika kita membuat analogi dengan Microsoft word, maka pengepala dan pengaki ialah bahagian atas dan bawah pengepala dan pengaki. Ini ialah bahagian tapak yang akan sentiasa muncul di bahagian atas dan bawah, tidak kira ke mana anda pergi dalam tapak.

Serpihan fail:

index.php - Bahagian utama

Bahagian utama(aka kandungan) bertanggungjawab untuk memaparkan suapan anda jawatan(rekod, penerbitan, ini semua sinonim). Fail ini mengandungi kod output tajuk jawatan, miniatur, pengarang, tarikh penerbitan, markah, pengumuman rakaman, butang untuk terus membaca entri tersebut Selanjutnya.

Serpihan fail:

sidebar.php - Sidebar

Panel sisi- ini adalah blok maklumat yang disertakan di mana widget, borang carian, butang sosial, awan label, mengiklankan, sepanduk dan maklumat lain. Bar sisi boleh berada di sebelah kanan bahagian utama atau ke kiri. Mungkin terdapat 2 bar sisi sekaligus, atau mungkin tiada langsung.

Serpihan fail:

Kod dalam fail ini menunjukkan bahawa bar sisi dalam tema ini boleh disesuaikan sepenuhnya melalui Konsol. Tetapi hanya bar carian tetap tegar di kedudukan atas. Ini bermakna untuk menambah atau menukar mana-mana elemen dalam bar sisi, anda perlu pergi ke menu Rupa → Widget, dan kemudian seret elemen yang diperlukan ke dalam kawasan bar sisi:

Sebagai contoh, ramai pembaca kami bertanya pemalam mana yang melaksanakan kami blok butang sosial pada halaman utama. Jawapannya lebih kurang seperti berikut: ini bukan pemalam tetapi pembangunan kita sendiri. Ditambah pada bar sisi Widget "Teks"., yang mengandungi kod penerangan untuk setiap butang. Ia kelihatan seperti ini:

functions.php - Fail konfigurasi tema

Ini ialah fail yang "tidak kelihatan" di tapak, tetapi yang memainkan peranan yang sangat penting dalam pengendalian tema yang betul. Sebenarnya, berikut adalah arahan operasi bahagian pentadbiran topik pendaftaran, semua orang berdaftar di sini fungsi tambahan, yang boleh digunakan oleh tema, semuanya disertakan di sini untuk dimuat turun komponen dan modul lain topik yang telah diserahkan oleh pembangun dalam fail berasingan, supaya kemudian satu komponen boleh diganti dan bukannya keseluruhan fail functions.php sepenuhnya.

Dalam erti kata lain, fail ini bertanggungjawab untuk utama komponen berfungsi tema reka bentuk. Dan tepatnya di functions.php Kebanyakan contoh kod daripada pelajaran kami disisipkan.

Serpihan fail:

Fail ini paling kerap mengandungi tampal kod daripada contoh dalam pelajaran kita. Ini dilakukan dengan sangat mudah: salin kod daripada pelajaran dengan mengklik pada butang ini:

(ini adalah gambar, bukan coretan kod)

Kemudian buka fail functions.php(atau fail lain yang dikehendaki) menggunakan editor terbina dalam atau program pihak ketiga(seperti yang diterangkan di atas), pergi ke penghujung fail dan tampal kod sebelum tutup php tag ?>

Ini adalah peraturan utama dan satu-satunya - jangan melanggar integriti dan struktur kod sedia ada.

Jika kod yang anda tampal bermula membuka tag php , maka anda perlu memasukkannya dengan sewajarnya selepas menutup yang sebelumnya. Tiada yang rumit.

style.css - Helaian gaya reka bentuk

Satu lagi fail yang sangat penting, tanpanya tiada tema WordPress akan berfungsi. Fail ini paling baik "kelihatan" pada halaman utama mana-mana tapak WordPress.

Semua hiasan, latar belakang, fon, warna, selang lekukan, pengisian, bayang-bayang, kecerunan- satu fail bertanggungjawab untuk semua ini style.css, jadi kepentingannya sukar untuk dinilai terlalu tinggi.

Serpihan fail:

Fail ini berbeza daripada semua yang diterangkan di atas kerana ia ditulis sepenuhnya menggunakan penanda penggayaan web CSS. Oleh itu, semua kod mengenai tetapan reka bentuk dalam pelajaran kami ditambahkan pada fail ini. Buka sahaja fail ini, tatal ke bawah dan tambah fail anda kod css bermula dengan baris kosong baru.

Apakah fail lain yang kita terlupa?

Saya hanya akan menyenaraikan secara ringkas dengan penerangan:

• 404.php- fail yang bertanggungjawab halaman ralat. Jika anda mengklik pada pautan yang memaut ke siaran atau halaman di tapak anda yang tidak wujud, anda akan dibawa ke 404.php, di mana ia akan ditulis Maaf, tetapi halaman sedemikian tidak wujud, Atau sesuatu seperti itu.
• arkib.php- fail ini bertanggungjawab untuk memaparkan dan memilih rekod berdasarkan kriteria yang dipilih: mengikut kategori, oleh pengarang, Sehari, bulan, tahun atau mengikut label.
• komen.php- semuanya mudah, fail bertanggungjawab

Kaedah untuk memasukkan kod html berbeza sedikit bergantung pada tempat yang anda perlukan untuk memasukkannya. Selaras dengan ini, kami akan mempertimbangkan pilihan yang berbeza.

Untuk memasukkan kod html ke dalam tapak, dan khususnya ke dalam teks artikel pada salah satu halaman tapak, pergi ke panel pentadbiran, pilih dan buka artikel yang dikehendaki untuk diedit. Seterusnya, mod editor visual mesti ditukar kepada mod penyuntingan. Apabila bekerja dengan sistem CMS, cuma klik untuk menukar mod. Kemudian salin dan tampal kod html ke lokasi yang dirancang.

Selalunya, selepas memasukkan, anda ingin memformat kod sedikit, sebagai contoh, tetapkan teks untuk membungkus kod di sebelah lain. Terdapat cara mudah untuk melakukan ini menggunakan sifat CSS.

Menggunakan tag

…

, bungkus kod anda dalam bekas. Ini juga boleh dilakukan menggunakan tag borang jadual. Dan di dalam bekas ini, gunakan sifat "gaya" untuk menetapkan semua atribut yang diingini.

Untuk memastikan bahawa apabila menyimpan artikel editor visual tidak memotong perubahan yang, pada pendapatnya, bukan kod html, adalah lebih baik untuk melumpuhkannya semasa memasukkan kod. Pemotongan perubahan editor direka untuk menghalang ancaman kod berniat jahat yang mungkin berlaku.

Bagaimana untuk melumpuhkan editor visual?

Dalam panel pentadbiran, klik "Tapak" - "Tetapan Umum" - "Tapak" dan dalam baris "Editor Visual" pilih "Tiada Editor". Kini ia akan menjadi mungkin untuk mengedit dan memasukkan kod html dalam mod kod html. Selepas anda menampal kod dan menyimpan perubahan anda, editor visual boleh dihidupkan semula.

Jika anda ingin mengedit semula artikel, kod html juga perlu dimasukkan semula. Kadangkala kod html perlu dipaparkan pada setiap halaman tapak. Memasukkan kod HTML supaya ia muncul pada setiap halaman tapak.

Untuk menyelesaikan masalah ini, gunakan Notepad atau editor lain untuk memasukkan fail tapak utama (secara lalai ini ialah index.php atau index.html). Dengan fail dibuka, pilih lokasi pilihan anda untuk menampal kod. Untuk kemudahan, anda boleh menetapkan frasa dalam carian yang terletak di tempat yang anda perlukan untuk memasukkan kod, supaya anda akan menemuinya dengan lebih cepat. Kemudian salin kod dan tampalkannya ke lokasi yang dikehendaki. Jika perlu, kod boleh diformat dengan cara yang sama seperti yang diterangkan untuk memformat kod dalam artikel.

Selain itu, saya ingin segera menjelaskan bahawa kami akan memasukkan kod ke dalam artikel itu sendiri, supaya pembaca kami boleh menyalinnya tanpa membuang masa menaip teks itu sendiri. Oleh itu, kami akan meningkatkan kemudahan () sumber kami - kali ini. Dan artikel akan kelihatan lebih profesional dan lengkap - itu dua.

Saya juga ingin ambil perhatian bahawa maklumat dalam artikel ini akan berguna kepada orang yang sama ada, seperti kami, memberitahu cara membuat pelbagai jenis penambahan pada tapak, atau pengguna yang hanya suka berkongsi maklumat berguna. Dan tidak mengapa maklumat ini adalah kod :) By the way, saya akan memberitahu anda sedikit rahsia; dalam projek ini kami memaparkannya menggunakan pemalam Wp-Syntex.

Anda mungkin bertanya: "Mengapa kami menggunakannya?" Jawapannya mudah - tidak ada rakan seperjuangan mengikut citarasa dan warna. bergurau. Sebenarnya, kami memilih pemalam ini kerana ia mudah digunakan, ia menambah gaya visual dengan sempurna kepada pelbagai jenis bahasa pengaturcaraan (css, html, java, javascript, perl, sql, dll.), dan tidak membebankan pelayan kami. .

Nah, kerana saya membiarkannya terlepas tentang Wp-Syntex, mari gunakan contohnya untuk menunjukkan cara memasukkan kod ke dalam artikel di WordPress.

Mula-mula anda perlu memasang pemalam ini. Kami bercakap tentang cara melakukan ini dalam artikel tentang . Oleh itu, saya tidak akan menerangkan tindakan ini di sini.

Akibatnya, anda akan melihat perkara berikut:

Kod yang anda ingin keluarkan

Selain itu, bukannya php dalam kod ini, anda boleh memasukkan bahasa pengaturcaraan lain, contohnya css atau java. Pada masa yang sama, gaya penampilan akan berubah.

Ciri tambahan Wp-Syntex

Jika anda menambah atribut pada teg "pra" pembukaan barisan, iaitu, kod yang anda perlukan untuk tampal akan bermula seperti ini:

Kod yang anda ingin keluarkan

Harap anda perasan perbezaannya?

Terdapat satu lagi atribut kecil yang mungkin anda perlukan - ini melarikan diri. Ia membolehkan anda menukar kod html aksara terus ke dalam aksara itu sendiri. Contohnya, ia menukar ">" kepada ">". Untuk membolehkan fungsi ini berfungsi, masukkan atribut berikut ke dalam teg "pra" pembukaan:

escaped="true"

Sehubungan itu, tag akan bermula seperti ini:

< pre lang= "php" line= "1" escaped= "true" >

Saya juga menemui maklumat di Internet bahawa anda boleh memasang pemalam lain (WP-Syntax Button), yang berfungsi bersama dengan pemalam kami dan menambah butang pemasukan kod pada editor WP. Saya tidak terlalu malas dan memutuskan untuk mengujinya.

Sejurus selepas memasangnya, saya terkejut dengan fakta bahawa ia tidak dikemas kini untuk masa yang agak lama dan tidak diuji dengan versi WordPress kami. Nah, apa yang boleh saya katakan, ketakutan saya adalah wajar.

Selepas mengaktifkan Butang WP-Syntax, saya memutuskan untuk mencuba memasukkan skrip java ke dalam salah satu artikel kami. Saya melakukan segala-galanya seperti yang ditunjukkan dalam gunung arahan dan cadangan. Saya memasukkan skrip ke dalam artikel, memilihnya dan menekan butang "kod".

Kemudian dia menunjukkan bahasa pengaturcaraan dan nombor baris dari mana output skrip harus bermula.

Anda mungkin bertanya mengapa saya menulis tentang eksperimen ini dalam artikel ini? Dengan ini saya ingin mengatakan bahawa apabila anda mencari beberapa maklumat di Internet, perhatikan tarikh penerbitan. Lagipun, terdapat kebarangkalian yang sangat tinggi bahawa maklumat dalam artikel lama adalah relevan beberapa tahun yang lalu, tetapi pada masa ini ia tidak berfungsi, dan penggunaan atau pelaksanaannya boleh membawa kepada kelemahan projek anda.

Di blog kami, saya cuba memastikan semua bahan dikemas kini, sentiasa memantau kemas kini dan, jika perlu, membuat pelarasan pada artikel yang sudah ditulis.

Jika anda ingin menerima maklumat terkini melalui e-mel, saya mengesyorkannya.

Video "Cara memasukkan kod HTML ke dalam artikel"

Rakan-rakan, jika seseorang lebih suka melihat bagaimana ini dilakukan, maka saya merakam video untuk anda. Dan saya mengingatkan anda bahawa kami juga mempunyai saluran YouTube, yang anda juga boleh melanggan.

Artikel berkaitan:

Baiklah, saya harap artikel itu tidak rumit, dan saya dapat memberitahu anda secara terperinci tentang bagaimana anda boleh memasukkan kod html ke dalam laman web tanpa perlu bersusah payah.

Jangan abaikan estetika blog anda. Lagipun, pembaca kami, seperti dalam kehidupan, bertemu anda dengan pakaiannya dan melihat anda pergi dengan fikirannya.

Itu sahaja untuk saya!

Selamat tinggal!

Yang ikhlas, Kalmykov Anton