Pikirkan terlebih dahulu tentang penskalaan, manfaatkan solusi Wordpress standar, buat tema WP dengan tangan Anda sendiri, jaga kenyamanan perancang tata letak, fokus pada mobilitas - dan perbarui blog perusahaan sehingga pembaca, editor, dan eksekutif menyukainya. Kami berhasil.
Blog Promopult berusia 9 tahun. Selama masa ini ia mengalami beberapa transformasi. Sergey Glazov , teknolog blog kami dan hal-hal penting lainnya dalam sistem Promopult, berbicara tentang yang terakhir.
Ini tidak lagi dibahas, karena telah menjadi norma: standar cepat dan sederhana untuk blog perusahaan, seseorang, pribadi, ya, apa pun, WordPress. Anda bisa berdebat, tetapi faktanya tetap.
Saya ingin berbicara tentang apa yang saya datangi dalam hal mengatur kode, bekerja dengan blog WordPress dan dukungannya. Kisah ini adalah tentang proses, karena keadaan saat ini adalah titik terakhir dalam proses ini dan tampaknya keadaan saat ini adalah yang paling sukses dibandingkan dengan semua iterasi masa lalu dalam pendekatan ke organisasi.
Apa yang terjadi pada (saya) mulai - pada tahun 2016
Jarang ketika pengembang membuat dan memikirkan semuanya dari awal. Lebih sering, ternyata sudah ( lebih sering bahkan untuk waktu yang lama, dengan sejarah terpisah ) ada proyek yang perlu didukung. Mendesain ulang, mengedit, TK besar, dan persyaratan. Dan dalam kondisi segalanya yang ada, perlu entah bagaimana cepat menavigasi dan memecahkan masalah.
Saya menerima blog pada tahun 2016, ketika sudah memiliki sejarah panjang dan tidak semuanya seindah yang saya inginkan.
- Desain blog lama dengan sejarah sembilan tahun.
- Kurangnya versi seluler / tablet dalam bentuk apa pun.
- Lebih dari 600 posting.
- Masalah struktural dengan konten dan organisasinya: 20+ kategori dan sembilan-plus ratusan tag (sekarang lebih banyak, tetapi kami sudah berhenti).
- Paket sudah memiliki rebranding dan pindah ke domain baru. Ini juga berlaku untuk blog.
- Rangkaian aksi yang panjang saat bekerja dengan kode.
- Bekerja tanpa kontrol versi (.git).
Tugas pertama: mobilisasi dan desain
Tugas utama adalah menambahkan kemampuan beradaptasi pada tema blog yang ada: untuk membuat pengguna seluler dapat membaca posting dan menggunakan situs secara memadai - mereka lebih banyak berbicara dan menulis tentang Mobile First , dan statistik menunjukkan bahwa mereka membaca blog dari ponsel.
Sejalan dengan karya-karya ini, desain baru digambar.
Sebagai seorang pengembang, saya bekerja bersama desainer, tanpa rantai mediator yang tidak perlu dalam diskusi, sehingga proses komunikasi lebih cepat dan lebih hidup. Fakta yang jelas, tentu saja, tetapi untuk beberapa alasan itu diabaikan dalam banyak proses. Dan ternyata sang desainer melakukan sesuatu yang sangat terpisah dari kenyataan. Bicara dengan mulut Anda dan diskusikan semua poin. Setiap peserta dalam proses ini tertarik untuk melakukan yang baik dan keren. Tetapi tidak semua orang mengerti bahwa proses itu adalah rantai yang terhubung, dan jika seorang pemain individu kehilangan atau tidak melakukan sesuatu di tempat kerjanya, akan sulit bagi orang-orang dalam proses selanjutnya.
Dalam perjalanan bekerja pada versi mobile, saya melihat kontra dan kelemahan dari organisasi proses pengembangan. Saya ingin mempercepat dan menyederhanakan semuanya.
Seperti yang kami lakukan dengan pekerjaan pada kode di blog
Ada versi DEV dari blog dengan database pengujian terpisah. Bekerja dengan file terjadi di server jauh, pengujian dilakukan di alamat terpisah, tidak dapat diakses di dunia luar. Setelah bekerja, pengujian dan kelahiran unit makna tertentu - itu diluncurkan ke blog pertempuran melalui permohonan ke admin. Apa yang dia lakukan adalah sihir yang terpisah.
Untuk blog tempat sesuatu berubah setahun sekali, proses yang bagus. Tetapi dengan edisi baru dan kebutuhannya, proses seperti itu akan menyusahkan.
Apa yang ingin saya dapatkan, seperti kata mereka, "di dunia yang ideal"
Semua kode terletak di. git repositori. Versi pertarungan blog adalah master repositori ini. Semua pekerjaan dengan kode terjadi melalui komit ke cabang atau cabang lain yang terkait dengan tugas besar individu.
Setelah tugas selesai, Permintaan Tarik (PR) dan / atau Permintaan Penggabungan (MR) dibuat dengan serangkaian suntingan. Arti dalam MR dan PR adalah sama, tetapi dalam berbagai layanan - nama yang berbeda. Kami memiliki GitLab , jadi Gabungkan Permintaan.
Saat membuat MR, alamat sementara dari form -git--test.dev.blog.promopult.ru tersedia, hanya dapat diakses oleh IP untuk verifikasi langsung di lingkungan pengujian.
Kode dalam MR yang dibuat ditinjau dan diperiksa secara otomatis (kode linter, yang saya periksa sintaksinya sesuai dengan aturan yang telah ditentukan) dan dalam mode manual (kekuatan vertikal dalam tim, timlid dengan hati-hati melihatnya dengan mata cembungnya yang penuh perhatian). Setelah melewati ulasan - dari antarmuka browser dari repositori .git, tombol Gabung diklik dan semua perubahan muncul di udara blog pertempuran setelah beberapa periode waktu yang jelas.
Mendesain ulang, pendekatan pertama
Rencana kerja desain ulang blog:
- Tata letak prototipe statis untuk tata letak desain semua halaman;
- Mengubah ("stretching") layout menjadi tema WordPress.
Layout - tahap kerja yang terpisah. Untuk pekerjaan mudah dengan gaya (CSS), markup dan JS, satu set plug-in dan modul digunakan dalam proyek, yang dirakit melalui tugas Gulp yang dijelaskan dalam pembangun SPT (Start Project Template).
Kata kunci yang digunakan dalam kolektor topik blog statis adalah: HTML, CSS, JS, Babel, Gulp, PostCSS, SCSS, Nunjucks.
Setelah menyelesaikan tata letak, strukturnya adalah sebagai berikut ( hanya direktori tingkat pertama yang ditunjukkan ):
├── desain # Desain, tata letak, dan semuanya
├── app / # Sumber proyek: modul terpisah
├── dist / # Versi rakitan proyek (file html) dan semua statika
├── gulpfile.js / # Config Gulp.js
└── package.json # File konfigurasi kolektor: paket, skrip
Setiap elemen semantik visual individu pada halaman, misalnya, kartu pos ( /components/article_card/ ), adalah folder di mana itu adalah:
- file markup ( article_card.html ),
- file gaya ( article_card.scss ),
- File JS ( article_card.js ).
Dan setiap halaman dikumpulkan dari blok komponen yang terpisah. Blok nyaman untuk dimanipulasi, dan perubahan apa pun tidak memengaruhi elemen tetangga.
Pada output, kolektor membuat folder dist , yang berisi file html siap pakai dari halaman untuk dilihat secara visual di browser pada tahap pengeditan dan koordinasi, serta satu file gaya, semua tema dan dua file JS: satu file ( app.js ) menggambarkan logika dan perilaku situs, yang kedua ( vendor.js ) berisi semua perpustakaan yang digunakan untuk situs (jQuery, fotorama, magnific-popup, dan lainnya).
Selanjutnya, Anda perlu mengubah semua ini menjadi tema WordPress dan memikirkan struktur file. Agar Anda dapat bekerja dengan mudah dengan tata letak statis, dan di sebelahnya terdapat WP-theme.
Daftar tata letak yang disiapkan oleh perancang. Mereka sama dengan file tema blog WordPress:
- Halaman rumah (file
home.php ). single.php posting single.php / posting ( single.php ).- Lihat satu halaman teks (
page.php ). - Halaman berlangganan buletin (
subscribe.php ). - Kesalahan 404 (
404.php ). - Pisahkan halaman tag (
tag.php ). - Halaman kategori terpisah (
category.php ). - Cari dan hasil pencarian (
search.php ).
Alur kerja dengan pendekatan ini dan pemisahan versi statis dan WordPress-versi tema adalah sebagai berikut: jika Anda perlu memperbaiki sesuatu di bagian visual - perubahan dibuat dalam versi statis dan setelah tes ditransfer ke tema. Jika pengeditan diperlukan di beberapa bagian non-visual, maka hanya file tema WP yang diubah.
Folder tema blog adalah bsp . Itu terletak di sepanjang jalan di folder dengan topik blog itu sendiri:
├── wp-content / # File situs WordPress khusus
│ ├── tema / # Tema situs
│ │ ├── aplikasi / # Sumber tema statis
│ │ │ ├── gulpfile.js / # Gulp-tugas untuk perakitan
│ │ ├── dist / # Bangun topik statis
│ │ │ ├── aset / # Sumber Daya: JS, CSS dan grafik
│ │ ├── bsp / # WP-PromoPult Blog Theme
│ │ │ ├── aset / # Sumber Daya: JS, CSS dan grafik, menyalin dari `/ dist /`
│ │ │ ├── home.php # Halaman utama blog dan file lainnya di akar topik
Tempat tema wordpress jelas dan ditentukan oleh struktur file WordPress itu sendiri.
Tidak ada topik lain di direktori tema - semua standar telah dihapus. Ada mitos tentang peningkatan produktivitas dengan cara ini, tetapi kami tidak menyadarinya. Ini dilakukan lebih banyak untuk pesanan dalam kode. Tidak perlu menyimpan apa yang tidak digunakan dan pasti tidak akan digunakan.
Juga di. Git adalah semua plugin WP yang digunakan. Di situs kami, ini adalah Peta Situs Google XML, RSS untuk Yandex Turbo, RusToLat dan WP-PostViews.
Prototipe statis yang dikompilasi dari halaman blog dan file sumber dipindahkan ke direktori tema blog: untuk berinteraksi dengan nyaman dengan bagian logis dari template dan dengan segala sesuatu yang bertanggung jawab atas penampilan dan perilaku elemen-elemen pada halaman.
Versi statis dari perakitan proyek - dengan sumber dan semua dependensi dalam upaya pertama untuk mengatur struktur - ditempatkan di direktori tema.
Yaitu, di sebelah tema bsp utama, direktori /app ditambahkan, di mana kode sumber untuk tata letak tema dan tegukan-kolektor berada. Tetapi dalam versi ini ada satu momen yang sulit: file statis dihasilkan dalam direktori terpisah, dan agar perubahannya ada di WP-theme, perlu menyalin file gaya statis dan skrip ke folder assets di dalam tema.
Pendekatan kedua: versi baru dari struktur
Pada minggu-minggu pertama, ini diputuskan oleh skrip konsol sederhana yang menyalin file yang dikumpulkan dari tema statis ke tema WP. Tindakan berlebihan menyebabkan kesalahan. Karena itu, opsi itu hanya untuk memperbaiki struktur.
Kami memiliki tiga direktori penting (sepanjang jalan dari root):
- Tema WP:
/wp-content/themes/bsp - Sumber tema statis:
/app - Topik statis yang dikumpulkan:
/dist
Dan di dalamnya ada assets dengan file gaya, grafik, dan JS
Anda perlu mengatur semuanya sehingga file dengan gaya dan skrip statis dikumpulkan di folder yang diinginkan ( /wp-content/themes/bsp/assets ).
Versi struktur yang baru adalah sebagai berikut:
├── gulpfile.js / # Gulp-tugas untuk perakitan
├── wp-content / # File situs WordPress khusus
│ ├── plugins / # WP-plugins
│ ├── tema / # Tema situs
│ │ ├── bsp / # PromoPult Topik Blog
│ │ │ ├── app / # Sumber topik statis
│ │ │ ├── aset / # Sumber Daya: JS, CSS dan grafik (pembuatan otomatis)
│ │ │ ├── home.php # Halaman utama blog dan file lainnya di akar topik
├── wp-admin / # WP-file untuk panel admin
├── wp-include / # WP-files dari sistem
Pada akar dari seluruh proyek adalah tugas menelan - dan dieksekusi dari root. Konfigurasi gulp-task menggambarkan struktur bahwa file statis dikumpulkan dari wp-content/themes/bsp/app ke wp-content/themes/bsp/assets tanpa tindakan tambahan seperti menyalin, dll.
File tema WP tetap tidak berubah dan hasil pekerjaan sesuai dengan skenario lama: suntingan dalam statik → transfer ke file WP. Statika CSS dan JS dihasilkan langsung di folder tema dan semuanya berfungsi.
Semua ini tentang proses kerja. Sekarang tentang bagaimana blog diatur.
PromoPult Blog: Cara Kerjanya
Kekuatan utama blog adalah tim. Editor, penulis, perancang tata letak.
Tugas besar adalah membuat bekerja dengan konten blog nyaman di area admin. Dan dengan mempertimbangkan fakta bahwa tema blog kami dibuat khusus untuk tugas konten dan permintaan editorial, panel admin telah dimodifikasi.
Daftar periksa sebelum publikasi
Pekerjaan apa pun penting untuk dikendalikan. Tata letak artikel adalah proses standar yang diformalkan, yang dapat dengan mudah disajikan dalam bentuk daftar periksa.
Orang- orang melihat ide itu dari EmailSoldiers . Kami memutuskan untuk menerapkannya di rumah.
Jika ada item yang tidak dicentang, sistem akan memperingatkan Anda sebelum publikasi.
Dengan mengklik tautan, tautan yang digarisbawahi dalam item daftar - sorot item tertentu.
Daftar periksa dikompilasi dalam urutan yang sama dengan pengaturan posting tambahan di panel admin.
Pengaturan posting blog
Jalinan erat dengan daftar periksa publikasi yang dijelaskan di atas.
Saat mengembangkan topik, saya mencoba untuk tidak menggunakan plugin, tetapi untuk membuat solusi yang sederhana dan mudah untuk tugas-tugas topik. Sorotan:
- Deskripsi untuk tag meta SEO.
- Deskripsi untuk tag OpenGraph yang menggunakan jejaring sosial untuk berbagi materi dan membentuk kartu artikel yang bagus.
- Pekerjaan mudah dengan gambar sampul untuk posting. Diperlukan satu gambar - itu ditambahkan ke kartu pos di ubin publikasi, yang ditampilkan pada halaman utama dan pada halaman heading atau tag.
- Pengaturan tema tambahan: posting dapat dengan atau tanpa sampul, ada teks pengumuman singkat yang kami tampilkan di header dengan sampul, dan juga digunakan dalam deskripsi artikel di milis intisari intisari.
Bagian pengaturan pos diimplementasikan melalui kotak-meta dan bidang khusus di WordPress.
Melalui kotak-meta, daftar periksa publikasi telah ditambahkan.
Di Templat, bekerja dengan bidang sederhana: jika bidang tidak kosong dan diisi, kami mendapatkan nilai dan menunjukkannya. Sebagai contoh, ini adalah bagaimana reaksi blok terhadap posting ditampilkan:
<?php if (get_post_meta($post->ID, 'postreaction', true)) { ?> <div class="article_reaction"> <div class="label-reaction"><span><?php echo get_post_meta($post->ID, 'postreaction', true); ?></span></div> </div><!-- /.article_reaction --> <?php } ?>
Contoh output reaksi pada kartu pos:
Hal-hal kecil yang menyenangkan
Ada beberapa hal kecil yang menyenangkan yang mungkin tidak ada yang melihat. Tetapi jika seseorang memperhatikan - bagus.
Misalnya, tanggal publikasi pos di kartu dan di pos terpisah di alfabet Cyrillic kami dan tahu cara membungkuk. Untuk beberapa alasan, ini bukan di kotak WordPress. Jika tanggal publikasi adalah tahun berjalan, maka tahun tersebut tidak ditampilkan bersama kami, jika tahun berbeda dari tahun saat ini, tanggal ditampilkan bersama dengan tahun publikasi.
Posting penghitung komentar. Mereka berpendapat sejak lama bahwa "0 komentar" atau "tidak ada komentar" sangat membingungkan. Solusinya sangat sederhana: jangan perlihatkan konter komentar sama sekali jika ada kurang dari satu komentar.
Secara umum, kami sedang mengerjakan sistem komentar secara terpisah dan ingin membicarakannya di pos besar yang terpisah. Kami membuat sistem komentar yang sederhana dan nyaman dengan otorisasi sederhana melalui jejaring sosial.
Suka sendiri: mengomentari atau berbagi tautan di jejaring sosial adalah masalah panjang berdasarkan tingkat konsumsi konten, tetapi klik "suka" dan jelaskan bahwa artikel itu keren - sederhana dan cepat. Kami membuat suka sederhana kami dan meletakkan konter di kartu pos. Dan suka tiba cukup cepat. Dan karena mereka berada di bagian bawah artikel, itu juga merupakan sinyal bahwa teks telah dibaca.
Mereka membuat tema gelap untuk blog mereka - sekarang menjadi modis. Dengan mempertimbangkan struktur modular (pada kenyataannya, situs ini adalah sekumpulan blok yang entah bagaimana digabungkan di antara mereka sendiri) dan pengaturan gaya, ternyata dilakukan dengan cukup cepat.
Tentang teknis yang menarik
Ada minifikasi kode markup, CSS dan JS dalam topik. CSS dan JS dikompresi melalui tugas teguk dalam kolektor statika, tetapi minifikasi markup dilakukan melalui WordPress hook WP_HTML_Compression .
Dan di komentar di markup, kami menambahkan kode promosi untuk mereka yang tertarik pada bagaimana situs ini diatur dari dalam dan siapa yang pertama-tama pergi untuk melihat kode sumber:
Caching CSS dan JS. Untuk men-cache gaya dan file skrip, tetapi selalu relevan, jika kami membuat ulang sesuatu, kami menggunakan waktu file (). Banyak dalam hal ini menggunakan ?<?php echo time(); ?> ?<?php echo time(); ?> . Tetapi opsi ini mengunduh file dan membuat permintaan dengan setiap panggilan.
Lebih baik menggunakan trik seperti itu:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/styles/style.css?t=<?php echo filemtime(get_theme_file_path().'/assets/styles/style.css'); ?>" />
Dalam hal ini, file akan diunduh jika telah diubah, dan tanggal file diubah akan ditambahkan ke parameter permintaan.
Plugin apa yang kami gunakan
Terlepas dari kemungkinan dan keinginan dalam beberapa kasus untuk bertahan dengan keputusan Anda, kami masih menggunakan plugin. Daftar kami adalah sebagai berikut:
Kiat kesimpulan untuk mereka yang bekerja di blog perusahaan
- Saya menyarankan Anda di awal pekerjaan pada proyek untuk segera berpikir tentang penskalaan.
- Pastikan untuk menggunakan
.git dalam pekerjaan Anda. Untuk 2019, tentu saja, saran aneh, tetapi saran ini dapat menyelamatkan seseorang dari rambut beruban dan menegur ketika terjadi kesalahan. - Lebih baik membagi pengembangan dan mengerjakan tema WordPress menjadi dua tahap: pertama, buat sesuatu yang statis, dan sudah melakukan "tarik" sesuatu seperti tema WordPress.
- Jika ada peluang - waktu, tim, dan pemahaman mengapa Anda membutuhkan semua ini - lakukan sendiri, tanpa menggunakan opsi yang sudah jadi. Menangkan secara berurutan dan memahami cara kerja semuanya. Anda tidak akan menghasilkan kruk.
- Gunakan pengait dan fitur standar WordPress jika blog Anda dibangun di atasnya. Menyesuaikan dan membuat solusi yang mudah adalah cepat dan mudah.
- Buat nyaman untuk pengguna dan editor.
- Jangan lupa tentang jejaring sosial dan tata letak mikro.
- Jangan lupa tentang versi seluler.
- Jangan lupa tentang pembaruan reguler untuk plugin dan sistem.
- Hanya pilih plugin yang terbukti.
Bekerja di blog terus - tinggal bersama kami.