Thursday, October 1, 2015

Bagaimana mengkonversi template PSD ke tema Wordpress

Tema WordPress adalah file yang bekerja sama untuk menciptakan desain dan fungsi dari situs WordPress. Setiap Tema mungkin berbeda, menawarkan banyak pilihan bagi pemilik situs untuk memanfaatkan untuk langsung mengubah tampilan website mereka.
Dalam tutorial ini kita akan menjelaskan langkah-langkah dasar tentang bagaimana sebuah Wordpress tema karya dan juga menunjukkan cara untuk mengkonversi template PSD ke tema Wordpress. Dan untuk tutorial ini, kita akan menggunakan Grunge tata letak blog yang kita buat di tutorial sebelumnya.
Menyelesaikan Grunge Wordpress Theme yang dapat didownload di bawah ini.
download latar belakang cat warna-warni
Download: 4297 kali

Langkah 1:- Mengiris file PSD

Pertama kita harus melihat pada desain PSD karena kami harus memeriksa bagian yang diperlukan untuk desain.Bagian utama dari template harus berikut: latar belakang, header, menu, bar Kiri, footer, peluru panah dan lain-lain yang diperlukan.

Latar belakang

Pada awalnya membuka desain berkas PSD dan menonaktifkan semua lapisan kecuali latar belakang satu. Sekarang simpan sebagai bg.jpg dan menyimpan untuk web.

Header & Separator

Sekarang mari kita pindah ke area header dan pilih 343px menggunakan "alat tanaman" dan simpan ini sebagai header.jpg. Dalam header pemisahan menu membutuhkan. Dari file PSD utama hanya memotong separator menggunakan 12x90 dimensi px dan menyimpan file baru sebagai menu_line.jpg.

Footer & Lainnya

Sekarang kita akan mengulangi proses yang sama dan pilih footer kami "alat tenda". Sekarang pilih strip bar ke bawah dan di atas teks hak cipta dan memotong bagian. Dimensi harus 1200x228 px dan menyimpan ini sebagai footerbg.jpg

Sekarang mari kita mengiris Sidebar. Pertama mengiris latar belakang pilihan pencarian dengan selembar transparan dan simpan sebagai searchbg.png, menu_bg.jpg, arrow.jpg, circle.png dan lain-lain juga.

Langkah 2: - HTML + CSS dari PSD Desain

Dari desain PSD Anda harus membuat HTML + CSS Template statis. Buka Dreamweaver dan membuat file index.html dan style.css dan simpan ke dalam folder. Folder harus terstruktur seperti yang ditunjukkan di bawah ini.

Folder Template

 Gambar (Folder)
 Style.css
 Index.css

LANGKAH 3: -

Sekarang mari kita mulai menulis kode untuk desain div / CSS berdasarkan. Menempatkan html / xhtml dan CSS yang ditunjukkan di bawah.

Index.html

Output Plot CSS XHTML

Step4: -

Template ini belum siap untuk dikonversi menjadi tema wordpress. Sebelum kita memulai konversi ini; kita harus tahu beberapa hal tentang wordpress.

Struktur dasar dari WordPress Tema

Folder tema wordpress default adalah (wp-content / themes / default), Anda akan melihat banyak PHP dan CSS file (Itu disebut file template). Berikut adalah file satu style.css yang mendefinisikan struktur utama dan gaya template.

File dasar tema wordpress

index.php
header.php
sidebar.php
footer.php

Sekarang file lebih terkait dan tujuan mereka: -

Style.css

Stylesheet utama: File ini harus dilampirkan dengan tema, dan itu akan berisi informasi header dari tema.

rtl.css

The rtl stylesheet. File CSS ini akan dimasukkan secara otomatis.

Index.php

File template utama: Ini adalah file induk dari template.

Comments.php

File ini mendefinisikan komentar Template.

Front-page.php

Halaman Template depan: itu hanya digunakan untuk halaman depan statis.

Home.php

Halaman rumah halaman depan secara default.

Single.php

File ini digunakan ketika sebuah posting tunggal tanya. Untuk ini dan semua permintaan template lain, index.php digunakan jika template permintaan tidak hadir.

Page.php

Yang satu ini digunakan untuk halaman individu template.

Category.php

Halaman ini diperlukan untuk menunjukkan kategori.

Tag.php

Halaman ini diperlukan bila tag diperlukan.

Date.php

Untuk menampilkan tanggal / waktu dan kita perlu halaman template ini.

Archive.php

Digunakan ketika kategori, penulis, atau tanggal dipertanyakan. Perhatikan bahwa template ini akan diganti oleh category.php, author.php, dan date.php untuk jenis permintaan masing-masing.

Search.php

Untuk melakukan pencarian kita perlu file ini di dalam template.

Attachment.php

Untuk melihat lampiran tunggal kita membutuhkan file ini.

Image.php

Gambar lampiran template digunakan saat melihat lampiran gambar tunggal.

404.php

404 Tidak Ditemukan template untuk menampilkan pesan kesalahan, ketika posting tidak ditemukan.

Langkah 5: -

Sekarang kita perlu kelompok file-file ini untuk wordpress.

Langkah 6: -

Berikut adalah index.php. File ini menyimpan semua file bersama-sama. Ada beberapa kata kunci wordpress dan sintaks yang ditunjukkan di bawah ini.
 get_header () / Untuk memanggil file header.php
 template_part ('lingkaran', 'index') / untuk konten utama situs
 get_sidebar () / untuk memanggil bar sisi tema seperti sidebar.php
 get_footer () / untuk memanggil file footer.php
Semua bersama-sama file index.php terlihat seperti ini: -

Sekarang di index.html Anda. Masukkan baris: get_header, get_sidebar, dan get_footer di urutan yang sama seperti struktur tata letak Anda.

Langkah 7: -

Sekarang seperti yang kita tahu header.php adalah file mengandung semua informasi header seperti meta style sheet, judul situs tag, banner dan menu atas.
Buka file index.html dan memotong dari atas ke <! - End header -> berakhir, paste di file PHP baru, dan menyimpan file sebagai header.php. Sekarang tempat kode php berikut ke dalam file header.php.

Lebih banyak dengan menu dan spanduk

Kode warna orange adalah bagian menu dinamis untuk tema. Fungsi menu utama untuk wordpress yang di bawah.
<? php wp_nav_menu (array ('container_class' => 'menu-header', 'theme_location' => 'utama')); ?> Dari kode ini menu yang terlihat dalam header dan kita dapat mengontrol item menu ini dengan css untuk gaya apapun.
Setelah menempatkan kode ke header.php dan menambahkan beberapa gaya untuk menu akan membawa Anda screen shot berikut.

Langkah 8: -

Sekarang pergi ke file index.html dan memotong bagian situs bar. Sekarang paste kode ini di dalam file sidebar.php cara yang sama seperti yang telah kita lakukan di header.php. Setelah tempat itu kode berikut untuk side bar.

 Langkah 9: -

Sekarang mari kita mulai footer kami. Sekali lagi pergi ke file index.html, dipotong dari awal footer <div id = footer> untuk akhir </ body> </ html> dan paste ke footer.php baru.

Dan untuk posting terbaru hanya menggunakan query_post untuk menampilkan 5 posting terbaru.
Semuanya dilakukan. Sekarang Anda perlu memeriksa index.php lagi untuk membentuk urutan yang tepat.
Selamat, Anda baru saja menciptakan sebuah wordpress theme mengagumkan. Sekarang, login ke panel admin Anda, pergi ke "Penampilan tab> tema" Anda harus dapat melihat tema, mengaktifkan dan pergi ke halaman depan untuk melihat tema.

Silakan Seperti, Tweet atau Bagi halaman ini jika Anda menemukan sumber daya ini berguna!


0 comments: