Tugasnya adalah membuat platform untuk pengembang PCB dengan fungsi berikut:
- kalkulator yang menyederhanakan kinerja kalkulasi tertentu;
- dasar pengetahuan untuk pengembangan papan sirkuit cetak;
- blog kolektif;
- pesan pribadi.
Saya awalnya skeptis bahwa ini dapat dilakukan di WP tanpa menulis modul khusus. Situs satu halaman, blog, toko online itu sederhana - ya, tetapi perhitungan teknik? Tapi semuanya berhasil - sangat bagus untuk pembuktian konsep, dan lebih banyak lagi tentang itu. Saya akan sampaikan dalam bentuk kasus tersendiri agar bisa terstruktur.
Sekali lagi, saya adalah seorang pengembang cetak, jadi ketika saya dapat mencapai apa yang saya inginkan darinya dengan mengubah kode PHP plugin, saya sangat senang. Artinya, yang akan saya bahas adalah bagi yang ingin membuat situs, namun belum memahami seluk-beluk WP, CSS dan PHP, walaupun secara umum mereka paham programming dan tidak takut kode.
1. Alat pengembangan
Saya tidak melakukan analisis komparatif yang panjang terhadap program-program tersebut; cukup bagi saya tugas yang diperlukan diselesaikan. Inilah yang saya gunakan:
- Visual Studio Code adalah editor gratis yang bagus untuk melihat dan mengedit kode plugin;
- Firefox Developer Edition - untuk melihat, mengedit, dan menganalisis halaman;
- FileZilla - untuk berbagi file plugin / tema dengan server;
- Total Commander - untuk mencari file dengan teks tertentu.
Di sini saya juga akan menyertakan satu WP-plugin - Loco Translate , hanya alat yang tak tergantikan untuk membuat atau menyesuaikan terjemahan plugin.
Sedangkan untuk WP sendiri, di segmen YouTube berbahasa Inggris, mungkin semuanya sudah diceritakan (saya tidak ingat tidak menemukan jawaban atas pertanyaan yang muncul), ada banyak saluran yang bagus, saya akan menyebutkan saluran WPBeginner dan Tutorial WordPress.
2. Kalkulator
WP memiliki sejumlah besar plugin, tetapi melakukan kalkulasi bukanlah tugas biasa sama sekali, kecuali jika menghitung harga barang atau asuransi. Tapi ada plugin untuk tugas ini. Ketika saya menemukannya, saya menyadari bahwa idenya dapat diwujudkan. Formulir Bidang Terhitung - dan bahkan dalam versi gratis, ini memungkinkan Anda membuat formulir untuk penghitungan, secara umum, itu hebat. Antarmuka dan editor rumus harus dipikirkan, tetapi logis dan didokumentasikan dengan baik. Berikut tampilan menu edit menggunakan salah satu kalkulator sebagai contoh.
Ada beberapa jenis kolom, termasuk yang memungkinkan Anda untuk menyusun konten formulir secara visual, tetapi yang utama adalah kolom input (pilihan atau input langsung dari suatu nilai) dan output (nilai terhitung).
Setiap kolom memiliki pengenalnya sendiri dengan nomor seri seperti "fieldname% n", sebenarnya itu adalah nama variabel yang digunakan dalam penghitungan di kolom kalkulasi. Dalam kasus ini, bidang kalkulasi layanan dapat disembunyikan.
Di antara fungsi yang sudah jadi, ada semua yang Anda butuhkan bahkan untuk kalkulasi kompleks, termasuk trigonometri dan trigonometri terbalik. Sintaks kolom kalkulasi memungkinkan Anda menggunakan percabangan if-else, fungsi js, dan panggilan pihak ketiga ( berikut adalah contoh dari dokumentasi). Contoh sintaks fungsi:
( function() {
if( fieldname3 > 100 ) return fieldname1+fieldname2;
if( fieldname3 <= 100 ) return fieldname1*fieldname2;
} ) ();
Fitur yang sangat berguna adalah pembuatan ketergantungan tampilan pada nilai bidang tertentu. Berikut adalah bagian yang relevan dari dokumentasi, dan berikut tampilannya dalam sebuah contoh:
Sejujurnya, plugin ini menyelamatkan saya. Tentu saja, halaman-halaman tersebut ternyata merepotkan, karena dalam beberapa perhitungan terdapat beberapa lusin kolom kalkulasi dan rumus yang kompleks. Saya ingin itu terbang, jadi rencana saya adalah menangani panggilan fungsi pihak ketiga yang akan memfasilitasi antarmuka, meskipun saya masih tidak tahu bagaimana melakukan ini. Nah, ini langkah demi langkah, saya akan mencari tahu.
Lebih dari pengalaman, apa yang akan saya rekomendasikan:
- Excel ( , : «», «POW»), , .
- , , . , .
- (, ) ' '.
- – «Div», . , . «» , «».
3.
Beberapa plugin menyediakan fungsionalitas dasar dalam versi gratis, tetapi membatasi opsi untuk menyesuaikan tampilan, meskipun menyesuaikan tampilan cukup sederhana. Ada dua alat untuk ini - CSS dan kode PHP itu sendiri. Saya akan menjelaskannya sebagai seorang amatir untuk seorang amatir.
3.1. Styling dengan CSS
Untuk setiap elemen halaman html, Anda dapat menentukan gaya tampilan menggunakan CSS:
CSS- {
_1: ;
_2: ;
}
Anda hanya perlu mencari di Google tentang pemilih dan properti, pengembangan web umumnya didokumentasikan dengan sangat baik, bahkan dalam bahasa Rusia, jadi tidak masalah. Saya hanya akan memberikan beberapa komentar.
Untuk mengetahui gaya mana yang diterapkan pada elemen dan apa pengenalnya, Anda memerlukan Firefox Developer Edition atau yang setara. Mengklik kanan pada elemen dan memilih "Inspect Element" akan menampilkan pesona.
Mari kita lihat pemilih dalam contoh ini. Elemen yang menarik adalah bidang masukan nama pengguna. Kode html berisi kelas dan id, sehingga Anda dapat menggunakan sebagai selektor:
.input-text input // ._ _ (. 1)
input.input-text // _._ (. 2)
#fep-message-top input // #id _ (. 1)
input#fep-message-top // _#id (. 2)
#fep-message .input-text // #id _
Pemilih id lebih "kuat", karena tidak boleh ada elemen dengan id yang sama di halaman yang sama. Jadi jika formulir plugin tertentu hanya digunakan pada satu halaman atau gaya tampilan cocok untuk semua kasus, maka pemilih id adalah yang Anda butuhkan. Tetapi bagaimana jika tidak ada id yang disetel untuk elemen tersebut, yang sering terjadi. Maka perlu melihat keberadaan id di blok induk. Misalnya, dalam kasus ini, penampung memiliki id = "user_box". Kemudian elemen tersebut dapat diakses seperti ini:
div#user_box input // _#id _
Bersarang bisa lebih. Sebagai contoh:
div.fep-field div.field-with-icon input //
Karena dalam kasus ini akses bukan id, gaya yang dijelaskan untuk pemilih ini akan berlaku untuk bidang masukan nama pengguna dan bidang masukan subjek pesan (keduanya dalam penampung kelas "bidang-dengan-ikon").
Opsi lain yang mungkin berguna adalah pemilih nilai properti. Untuk contoh ini:
input[type="text"] // «type»
Saya pikir intinya secara kasar jelas, trial and error bekerja dengan baik di sini. Keindahannya adalah Firefox DE memungkinkan Anda untuk mengedit kode halaman, penyeleksi, properti dengan cepat. Kami mencapai hasil yang diinginkan - dan mentransfer perubahan yang dihasilkan ke server. Ada tiga metode untuk ini:
- di plugin, setelan mungkin berisi kolom seperti "CSS Khusus", "Gaya Tambahan", dll.;
- sama dalam pengaturan tampilan tema;
- buat perubahan pada file sumber dengan CSS (disorot pada gambar di atas) - dengan metode ini saya tidak berhasil dengan file gaya umum tema style.css, ada sesuatu yang sulit untuk dilakukan.
Di antara nilai properti yang sama di pemilih berbeda, properti dengan prioritas tertinggi akan selalu dipilih. Logikanya adalah bahwa definisi lokal memiliki prioritas yang lebih tinggi daripada definisi global. Dalam kasus ketika tidak mungkin untuk mengganti properti menggunakan selektor, yaitu, pengubah "! Penting", yang menaikkan prioritas nilai:
input[type="text"] {
padding-left: 40px !important; //
}
Hal terakhir yang perlu dikatakan tentang pemilih adalah konstruksi “@media” untuk gaya responsif, yang mengaktifkan pemilih dalam kondisi tertentu: lebar tampilan minimum atau maksimum, dll. Berikut contoh penggunaan:
@media(max-width:650px) { //
.comment-body .avatar {
width: 50px !important; //
}
}
Adapun propertinya sendiri, ada banyak sekali dan Anda perlu melihat dokumentasi untuk tugas tertentu. Hal termudah untuk dilakukan adalah mengubah warna, memposisikan, dan menyalin gaya yang sudah jadi. Pemilihan warna menjadi nyaman dengan cepat di Firefox DE. Mengenai pemosisian, Anda perlu memahami nilai yang berbeda dari properti "display" dan membaca, misalnya, artikel ini .
3.2. Menyesuaikan tampilan dengan PHP
Dua alasan utama untuk mengedit kode plugin PHP adalah penggantian teks dan pengeditan tata letak halaman.
3.2.1. Mengganti teks
Adapun yang pertama, dengan cara yang bersahabat itu harus diselesaikan menggunakan menu pengaturan plugin, atau menggunakan plugin Loco Translate. Bagaimana cara kerja pelokalan plugin secara umum? Bahasa situs dipilih dalam pengaturan umum di konsol WP dan ini menentukan file terjemahan mana yang akan digunakan. File terjemahan (ekstensi .po) memiliki struktur berikut:
#: utilities.php:1910 utilities.php:2095 //
msgid "Lost your password?" //
msgstr " ?" //
Di baris yang sesuai dari file utilities.php (tahun 1910, misalnya) kami menemukan:
$str .= '<div class="impu-form-links-pass"><a href="'.$lost_pass_page.'">'.__('Lost your password?', 'ihc').'</a></div>';
Di sini Anda dapat melihat string asli dan id dari domain teks dari plugin 'ihc', dan string yang diterjemahkan akan diganti sebagai hasilnya. Loco Translate menyediakan antarmuka yang sederhana dan nyaman untuk bekerja dengan file terjemahan.
Terkadang baris ini berisi karakter yang menentukan format keluaran -% s,% d, dll. - dalam terjemahan mereka, tentu saja, perlu dipertahankan. Dengan mereka, omong-omong, ada masalah dengan jamak dan akhiran yang berbeda untuk nomor yang berbeda ("3 komentar", "5 komentar"), Anda harus keluar.
Jadi, terkadang, jika pengembang tidak menunjukkan entri dalam file terjemahan, maka itu tidak dapat dicapai dengan metode di atas. Anda harus bertindak berbeda. Semua file plugin diunduh dari direktori / wp-content / plugins / plugin_name dan menggunakan pencarian berdasarkan baris atau bagian dari baris (Total Commander atau analog untuk membantu) mencari file php yang berisi itu (bagus jika unik, bukan " Gabung "). Dan Anda dapat mengganti string langsung di kode, atau menambahkan entri ke file terjemahan dan membuat terjemahan yang diinginkan.
3.2.2. Pengeditan tata letak
Situasi mungkin muncul ketika Anda ingin mengubah sesuatu yang tidak berubah di plugin atau pengaturan tema. Saya akan memecah satu contoh di sini. Jika bagian ini menimbulkan minat dan pertanyaan, saya akan melengkapinya. Yang terpenting, saya menyelesaikan plugin Front End PM untuk korespondensi pribadi . Fungsionalitas tidak populer, jadi ini mungkin satu-satunya plugin yang mengimplementasikannya, dan karenanya, elaborasi di bagian tampilan rendah. Saya mengembalikan file asli yang membentuk blok atas halaman untuk menunjukkan bagaimana hal itu dilakukan secara berurutan.
Kami menemukan melalui "Elemen Inspeksi" blok yang ingin kami ubah dan mencari pengenal unik untuk pencarian - ini adalah nama atau id kelas khusus plugin, pertama-tama. Di sini id = "fep-header" disetel untuk penampung umum. Mencari kemunculan baris mengarah ke file dengan nama header.php yang sudah jelas. Buka dengan VS Code dan perhatikan kode berikut:
<div id="fep-header" class="fep-table">
<div>
<div>
<?php echo get_avatar( $user_ID, 64, '', fep_user_name( $user_ID ) ); ?>
</div>
<div>
<div>
<strong><?php esc_html_e( 'Welcome', 'front-end-pm' );?>: <?php echo fep_user_name( $user_ID ); ?></strong>
</div>
<div>
<?php echo strip_tags( sprintf( __('You have %1$s and %2$s unread', 'front-end-pm'), '<span class="fep_unread_message_count_text">' . sprintf( _n( '%s message', '%s messages', $unread_count, 'front-end-pm' ), number_format_i18n( $unread_count ) ) . '</span>', '<span class="fep_unread_announcement_count_text">' . sprintf( _n( '%s announcement', '%s announcements', $unread_ann_count, 'front-end-pm' ), number_format_i18n( $unread_ann_count ) ) . '</span>' ), '<span>' ); ?>
</div>
<div class="<?php echo $box_class; ?>">
<?php echo strip_tags( sprintf( __( 'Message box size: %1$s of %2$s', 'front-end-pm' ), '<span class="fep_total_message_count">' . number_format_i18n( $total_count ) . '</span>', $max_text ), '<span>' ); ?>
</div>
</div>
<?php do_action( 'fep_header_note', $user_ID ); ?>
</div>
</div>
Bagi mereka yang tidak terbiasa dengan PHP (seperti saya), ini terlihat seperti HTML tetapi dengan <? Php ... code ...?> Sisipan. Sisipan ini digunakan untuk membentuk halaman HTML bergantung pada berbagai parameter, misalnya, data pengguna. Artinya, PHP adalah konstruktor halaman statis, dan JavaScript digunakan untuk menangani peristiwa kompleks.
Saya menyalin gaya panel atas dari plugin yang lebih detail, menghapus informasi yang tidak perlu tentang ukuran kotak surat, mengubah cara informasi tentang pesan baru ditampilkan. Inilah yang terjadi pada kode dan tampilan.
<div class="fep-header">
<div class="fep-header-left-side">
<div class="fep-user-page-avatar">
<?php echo get_avatar( $user_ID, 96, '', fep_user_name( $user_ID ) ); ?>
</div>
</div>
<div class="fep-header-right-side">
<div class="fep-header-username">
<?php echo fep_user_name( $user_ID );?>
</div>
<div class="fep-header-top-info">
<?php
if( $unread_count == 0 && $unread_ann_count == 0 )
{
echo sprintf( __(' .', 'front-end-pm'));
}else{
if( $unread_count != 0 )
echo sprintf( __(' : %d<br>', 'front-end-pm'), $unread_count);
if( $unread_ann_count != 0 )
echo sprintf( __(' : %d', 'front-end-pm'), $unread_ann_count);
}
?>
</div>
</div>
<?php do_action( 'fep_header_note', $user_ID ); ?>
<div class="fep-top-background"></div>
</div>
Secara alami, prosesnya berulang dan sangat tidak nyaman, tetapi saya mengundurkan diri. Mungkin ada cara yang lebih nyaman. Simpan file (VS Code), ganti file di server (FileZilla), segarkan halaman (Firefox DE). Ini bukan kasus yang paling sulit, tetapi ini menunjukkan inti dari prosesnya. Ini sama dalam tugas yang lebih kompleks - dengan perubahan fungsi, kelas dan larik data, dan dalam tugas yang lebih sederhana - saat Anda hanya perlu menukar blok atau menghapus blok yang tidak perlu.
Tetapi pendekatan ini membuat proses pembaruan jauh lebih sulit. Setelah pembaruan, mungkin (saya tidak melakukannya selama berfungsi sesuai dengan prinsip "berfungsi dan baik"), Anda harus melakukan pengeditan ulang. Ini mungkin kelemahan utama.
4. Kinerja
WP bukan tentang kecepatan. Upaya untuk meningkatkan kecepatan unduh, sejujurnya, tidak menyebabkan peningkatan yang signifikan, tetapi menyebabkan kegagalan fungsi. Saya menggunakan plugin Asset CleanUp untuk menghapus pemuatan CSS / JS yang tidak perlu, tetapi tidak melihat peningkatan yang nyata dalam kecepatan pemuatan (saya melihat GTmetrix ), tetapi saya perhatikan bahwa beberapa plugin naik di semua halaman, terlepas dari apakah mereka digunakan di sana atau tidak. Pada akhirnya, saya mematikannya. Kemudian saya mencoba W3 Total Cacheuntuk halaman cache di server - ketika halaman tidak dibuat menggunakan PHP, tetapi salinan selesai dimuat (yang diperbarui secara berkala). Tetapi dengan itu situs saya macet, dan kemudian saya juga melihat bahwa pengaturan yang disarankan bukan untuk halaman cache untuk pengguna yang login, menjadi jelas bahwa halaman cache dalam kasus saya cukup sulit untuk diatur. Saya hanya menyisakan sebagian caching dari potongan kode, saya akan mencari tahu lebih lanjut (terkadang sekarang Anda harus mengatur ulang cache agar perubahan pengaturan plugin berlaku).
Secara umum, saya pikir dalam beberapa kasus ini berfungsi dengan baik, tetapi tidak segera membantu saya. Seperti yang saya pahami, WP Rocket berbayar memiliki opsi caching untuk setiap pengguna, mungkin saya akan mencobanya nanti.
5. Keamanan
Pada suatu waktu di institut itu dia mempelajari spesialisasi "Keamanan Informasi". Meskipun setelah lulus ia mulai terlibat dalam elektronik, deformasi profesional tetap ada. Bahwa Internet itu bocor dalam hal keamanan. Saya bisa membayangkan berapa banyak kerentanan yang ada di WP dengan strukturnya yang menumpuk. Tidak semua orang dapat ditambal, tetapi saya melakukan hal yang paling sederhana dalam langkah instruksi ini dan menginstal Wordfence - mari kita lihat jika kinerja tidak terlalu terpengaruh, Anda dapat meninggalkannya.
6. Plugin
6.1. Manajemen pengguna dan akses
Untuk mengatasi masalah ini, saya memilih plugin Indeed Ultimate Membership Pro ($ 41). Ada video tutorial terpisah tentangnya - di sini. Saya harus mengotak-atik, banyak pengaturan, tetapi saya tidak akan menulis tentang semuanya secara rinci, jika saya memiliki pertanyaan, saya akan menjawab di komentar atau pesan pribadi. Saya hanya akan memberi tahu Anda tentang metode kontrol akses.
Pada dasarnya, ada beberapa peran dalam sistem (yang pada awalnya disesuaikan untuk blog), dan banyak plugin bekerja dengannya, mengontrol kapabilitas tergantung pada perannya. Peran default diatur di "Pengaturan> Umum".
Plugin manajemen langganan menambahkan level lain - level langganan, yang dengannya Anda dapat mengontrol akses ke konten dan tampilannya untuk setiap halaman, termasuk tampilan item menu. Selain itu, pengguna dibagi menjadi terdaftar dan tidak terdaftar - ini adalah cara lain untuk memisahkan tampilan konten.
Plugin ini bukannya tanpa kekurangan, tetapi ia melakukan tugasnya. Ada banyak pengaturan, tetapi ada video pelatihan, Anda dapat mengetahuinya, dukungan teknis, jika ada, akan mendukung dan memberi tahu Anda.
6.2. Dasar pengetahuan
Awalnya saya menempatkan buku di platform menggunakan plugin pdf viewer, tetapi tidak ada cara untuk membuat tautan ke materi, dan pdf bukanlah opsi yang paling fleksibel untuk dilihat. Menolak dan memutuskan untuk pergi ke basis pengetahuan. Saya hanya akan memanggil plugin Echo Knowledge Base , itu benar-benar bagus. Tetapi untuk melihat pdf - Saya tidak bisa tidak menyebutkan plugin Flowpaper , sangat bagus, mungkin akan berguna bagi seseorang.
6.3. Pemungutan suara
Saya suka plugin Yop Poll - sekali lagi, ada semua yang Anda butuhkan, semua pengaturan, bahkan tampilannya cukup bagus di versi gratis.
7. Apa yang tidak berhasil
Blog kolektif membutuhkan kemampuan bagi pengguna untuk membuat postingan. Pilihannya tidak bagus - plugin User Submitter Posts (ada juga yang berbayar). Saya bahkan membeli versi berbayarnya, tetapi itu membunuh formulir otorisasi saya, konflik dengan plugin manajemen langganan - Saya mengembalikan uangnya, pengembang tidak menyelesaikan masalah, menyalahkan semuanya pada plugin lain. Tapi bukan itu intinya. Formulir pembuatan publikasi tidak memberikan kesempatan untuk mengunggah dan memasukkan gambar ke dalam publikasi.
Mulai berurusan dengan hak, itu berguna, menginstal plugin yang berguna Editor Peran Pengguna . Jadi ternyata memuat gambar hanya ketika pengguna diberi hak untuk mengedit semua halaman. Tin full, tentu saja dinonaktifkan, sementara Anda hanya dapat meletakkan link URL ke gambar. Masalahnya di sini adalah bahwa postingan tersebut belum ada dan WP melihat menambahkan gambar sebagai pengeditan halaman yang berisi formulir pembuatan postingan. Mungkin seseorang dapat memberi tahu Anda cara mengatasi steker ini?
8. Kesimpulan
WP memungkinkan untuk membuat proyek percontohan platform dengan fungsionalitas yang bukan yang paling sederhana dengan biaya minimal. Dia memecahkan masalahnya dengan menciptakan titik awal untuk pengembangan lebih lanjut. Jika Anda memiliki pertanyaan tambahan tentang konten postingan, saya akan dengan senang hati membagikan pengalaman saya. Saya juga akan berterima kasih atas komentar dan rekomendasi dari spesialis (untuk meningkatkan kinerja - apakah CDN seperti CloudFlare, atau WP Rocket berbayar, hosting khusus seperti WP Engine, atau Wordfence benar-benar diperlukan).
Semoga beruntung untuk semuanya!