Beranda / Kreatif

Panduan Cara: Mengonversi Tema PSD ke WordPress


Desain web yang diteliti dan dipikirkan dengan baik dan menyerahkan pengkodean / implementasi yang sulit kepada programmer. Jadi desainer web membuat desain (sebagai dokumen Photoshop / PSD) dan pengembang WordPress mengubahnya menjadi antarmuka situs web yang berfungsi penuh melalui HTML, CSS, JavaScript, dan PHP (bahasa pemrograman WordPress).

Catatan: Artikel ini mengasumsikan Anda agar terbiasa dengan Photoshop, Struktur Tema WordPress, dan memiliki keakraban yang lewat dengan bahasa pemrograman web.

1. BREAKING DOWN THE DESIGN - SLICING PSDS


Tidak seperti gambar JPEG / JPG, file PSD bisa berlapis.

Biasanya tugas para desainer adalah untuk menyediakan pengembang dengan desain berlapis dan / atau diiris dengan baik, dengan semuanya dipisahkan dengan rapi menjadi elemen antarmuka individu. Tetapi jika itu tidak datang, para pengembang memotong PSD sendiri.

Pada dasarnya, ini berarti memotong desain menjadi lapisan yang lebih kecil yang akan disusun kembali melalui kode (kita akan membahasnya) untuk membuat halaman web. Setiap irisan dapat ditautkan ke tautan URL yang berbeda (misalnya, navigasi situs, navigasi dalam halaman, pagination, dll.) Dan dioptimalkan dalam Photoshop (misalnya, menambahkan teks HTML pada irisan Tanpa-Gambar, warna latar belakang untuk masing-masing irisan, pengaturan perataan, tentukan Alt teks untuk irisan dan opsi output HTML lainnya, dll.).

Photoshop menyimpan setiap irisan sebagai file terpisah dan menghasilkan kode HTML dan CSS untuk menampilkan gambar yang diiris. Ini signifikan dari perspektif kinerja, karena memungkinkan pengembang untuk memisahkan elemen branding (seperti logo, spanduk, dll.) Dari item yang dapat dibuat kembali melalui CSS (seperti ubin latar belakang, warna / efek tombol, dll.).

2. KEMBALI KE DASAR: MENULIS HTML, CSS, DAN JAVASCRIPT


Pengembang diatur untuk membuat situs web HTML. Sederhana dalam teori dan rumit dalam praktiknya: Irisan harus dikodekan dengan cara yang membuat halaman web terlihat persis seperti desain PSD.

Semacam kerangka (rangka gambar) siap setelah irisan dikonversi dan ditempatkan di posisi mereka dalam file HTML.


  • Kemudian pengembang mengatur untuk menata HTML ini dengan penulisan CSS yang sesuai standar, bebas hack, dan sesuai standar WordPress (ini mengurangi beban kerja nantinya). Lembar gaya ini (bernama css) akan mengontrol presentasi visual semua elemen HTML. Ini adalah skrip yang ditulis, diuji, dan ditingkatkan secara menyeluruh untuk desain visual yang dipoles, kompatibilitas lintas-browser, dan responsif. (Catatan: Dukungan bahasa dari kanan ke kiri harus dikodekan secara terpisah dan dinamai rtl.css)
  • Langkah ini dibatasi dengan menambahkan JavaScript ke dalam campuran. Ini dilakukan hanya untuk membuat antarmuka lebih kaya dan lebih interaktif. Cobalah untuk tetap menggunakan skrip dan pustaka yang terdaftar dan / atau digunakan oleh WordPress atau gunakan wp_register_script () untuk menambahkan dependensi baru. (Catatan: Ingatlah untuk memanggil skrip JS menggunakan wp_enqueue_scripts () di WordPress.)

3. MEMBAGI BAGIAN: MEMASUKI HTML KE TEMPLAT WORDPRESS



  • Tag HTML terpisah seperti <nav>, <header>, <body>, <footer>, dll. Dibagi menjadi file templat modular seperti image.php, header.php, footer.php, comments.php, index.php, dll . yang menggabungkan (seperti yang diperintahkan) untuk membentuk halaman web (yang ditampilkan sebagai HTML). Pastikan untuk memeriksa file templat terhadap daftar periksa dalam kodeks dan hierarki.
  • Tag Templat mengontrol file templat mana yang akan digabungkan untuk membuat halaman yang ditentukan. Ini juga merupakan langkah di mana Jenis Pos Kustom dan template Halaman dibuat dan diintegrasikan dalam tema.
  • Stylesheet yang ditulis sebelumnya (style.css) tetap sama, sementara elemen JS ditambahkan ke halaman

4. MENAMBAH EKSTRAS


Langkah ini melibatkan penggunaan API kustomisasi tema untuk memberi pengguna akhir kontrol yang lebih baik atas pengaturan tampilan tema, menambahkan plugin (yang dasar yang dibutuhkan setiap situs web untuk keamanan, caching, perlindungan spam, SEO, dll. Serta yang spesifik seperti WooCommerce, Google Analytics, dll.) Dan widget (kalender, radio streaming langsung, dll.), Dan membuat fungsionalitas khusus dari awal.

Ini juga tempat skrip dan file dikompilasi ke dalam folder tema tunggal.

5. PENGUJIAN


Setiap proses pengembangan web tidak lengkap tanpa putaran pengujian, debugging, dan yang terbaik dari semuanya, optimasi.

Babak ini adalah tempat tema WordPress diuji unit, HTML dan CSS divalidasi pada standar W3C, dan kesalahan JavaScript, PHP, dan WordPress ditemukan dan diperbaiki.

Di sinilah tema diuji untuk kinerja, kompatibilitas browser, dan responsif. Script CSS dan JS ditulis dan dimodifikasi sampai tema berjalan sebagaimana mestinya.