Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Bagaimana membangun Joomla Template: awal sampai selesai

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

Untuk memulai, aku tidak bahkan akan menyentuh perang tak terelakkan api di sini. Joomla vs WordPress vs... Siapa yang peduli? Dan terus terang, tidak seharusnya Anda. Anda tidak akan mempalu Paku dengan gergaji, iya kan? Jadi mari kita diingat bahwa setiap pekerjaan yang memerlukan alat yang sesuai.

Bahwa sudah dikatakan, tutorial ini akan menunjukkan bagaimana untuk melanjutkan dari desain ke deployment lengkap Joomla template tema, termasuk override core dan template pilihan parameter yang Anda dapat menggunakan dan pelecehan isi hati Anda.

Memahami sekitar

Tujuan saya adalah untuk memberikan sesuatu yang bermanfaat--bukan amunisi. Ada begitu banyak sumber daya WordPress indah dan begitu sedikit untuk Joomla. Ini adalah usaha saya untuk membantu dalam upaya; Saya harap ini menjadi berguna. Jadi mari kita mulai!


PSD

Back up

Berikut ini adalah desain yang aku mulai. Saya menemukan sebuah file PSD gratis online di sini, dan dimodifikasi itu untuk ini tut. Cara termudah dan tercepat saya telah menemukan untuk mendapatkan dari PSD ke HTML adalah bagaimana saya akan menunjukkan di sini. Mulailah dengan membuat auto select layers diaktifkan di Photoshop, dan kemudian membuat catatan dari gambar yang Anda perlu diambil. Berkonsentrasi pada bagian-bagian yang baik Anda tidak bisa, atau tidak ingin duplikat, melalui CSS. Ini termasuk hal-hal, seperti citra sebenarnya, logo, dan tombol (mungkin). shadown dan gradien panggilan Anda, mengingat sifat-sifat CSS3 baru, dan harus memutuskan pada kasus per kasus. Untuk tutorial ini, kami akan mencapai efek-efek dengan CSS.

Peramban lama mendapatkan warna solid... baik-baik saja dengan saya!

Mulai dengan mengklik pada logo untuk highlight laye yang sesuai pada panel lapisan. Sekarang, memindahkan kursor ke thumbnail dan option + klik untuk auto pilih layer seluruh; Anda akan harus melihat semut yang menari-nari itu sekarang.

Selanjutnya, tekan copy, membuat file baru, (cmd + c, cmd + n jika Anda Mac) dan Anda akan melihat bahwa tinggi dan lebar secara otomatis ditetapkan; cukup tekan enter, kemudian sisipkan (cmd + v) dan Anda memiliki logo. Anda mungkin tidak melihat itu sebagai latar belakang menyatu dengan teks, jadi langkah berikutnya, untuk semua gambar Anda menyalin yang memiliki transparansi, adalah untuk mematikan lapisan latar belakang.

Selanjutnya, Simpan sebagai file .png untuk melestarikan cantik Lihat-through-ness dan nama itu sesuatu yang jelas seperti "logo" atau semacam itu. BAM! Satu gambar dilakukan. Bilas dan ulangi untuk semua gambar yang Anda perlu untuk mengambil.

Salah satu yang rumit dapat dengan titik-titik tombol yang digunakan untuk navigasi slider. Cara termudah yang saya telah menemukan untuk melakukan ini adalah untuk menyalin layer atau group yang membentuk salah satu titik-titik, dan kemudian dimasukkan ke dalam file baru, lebih besar daripada ukuran sebenarnya. Kemudian matikan layer latar belakang, pergi untuk trim di edit menu,

dan menyingkirkan transparan pixel sehingga ukuran tepat.

Melanjutkan, mengedit gambar ukuran kanvas untuk menjadi ketinggian 200%, dan hanya menyalin, (option + klik) lapisan atau kelompok dan alihkannya untuk menduplikasi itu. Membuat perubahan ke satu ini dan Anda sekarang memiliki state aktif! Mudah seperti pie benar? Simpan gambar ini baru dan tombol kita sudah siap!

Setelah mengumpulkan pics, pindahkan mereka ke dalam folder, yang dinamai images, dan sekarang saatnya untuk mulai membangun struktur HTML; Mari kita menggali beberapa HTML.


HTML

Back Up

Jadi kami memiliki desain dan gambar; Sekarang saatnya untuk mengubah mereka menjadi sesuatu yang bermanfaat. Anda dapat melewatkan langkah ini, dan sangat baik dapat belajar sebagai Anda menjadi lebih mahir dengan template situs; Namun, saya masih merasa terbantu untuk membangun versi statis sebelum pindah penuh konversi ke tema. Buat struktur folder yang sederhana seperti begitu, dan kemudian di index.html, membangun kerangka HTML standar dengan struktur.

Ini adalah HTML5 dasar yang kita akan gunakan untuk membuat situs ini. Hal ini didasarkan pada HTML5 Boilerplate. Anda akan melihat dimasukkannya Moderizr script, jadi pastikan untuk men-download ada jika Anda membutuhkannya. Mulai dari atas, mari kita pergi ke depan dan menambahkan di bagian kami logo dan navigasi, sehingga dalam header_container, menambahkan potongan berikut:

Ini mencakup logo link dan sistem menu sederhana, lengkap dengan kebaikan dropdown. Saya menggunakan tag baru, nav, markup semantik HTML5. Up berikutnya adalah area slider konten, jadi, dalam bagian wrapper kami, tambahkan berikut untuk membuat daftar gambar:

Jangan ragu, jelas, untuk mengubah link teks dan gambar sesuai dengan setup Anda sendiri, atau cukup ikuti di sini. Pastikan bahwa Anda tidak melompat ke dalam browser untuk memeriksa ini namun, karena itu akan terlihat mengerikan!

Daftar elemen dalam slider ul akan semua mulai disembunyukan, kecuali yang pertama, yang mengapa ia memiliki class diberikan: first. Dengan cara ini, kami menyimpan semua gambar dari sebentar menampilkan memuat halaman, bypassing flicker yang mengganggu itu.

Selanjutnya, kita menambahkan beberapa hal konten utama; drop di kedua bagian. Aku hanya duplikasi apa yang ada dalam PSD ketika kita mulai.

Aku memberikan potongan pertama tag aside saat aku merasa tangential berkaitan dengan sisa konten, dan konten utama mendapatkan tag artikel karena akan menjadi area utama.

Sekarang untuk memasukkan bagian tri-kolom kami:

Saya aptly bernama bagian dengan ID dari columns, dan, dalam, memiliki tiga artikel dengan class untuk style mereka benar kemudian. Aku menambahkan dalam sebuah garis horizontal untuk memecah sedikit juga.

Akhirnya, kami tiba di bagian gambar kami:

Perlu dicatat di sini adalah dimasukkannya atribut rel pada link gambar dalam tag gambar. Aku melakukan ini untuk memasukkan plugin PrettyPhoto kami akan menggunakan tambahan pics ini. Gambar yang ditampilkan adalah ukuran yang lebih kecil, thumbnail satu, dan sebenarnya href poin untuk gambar berukuran penuh.

Sekarang, turun ke bawah, dalam footer_container, drop di sections ini untuk memberikan kami tiga kolom dan konten terkait:

Dan akhirnya, di luar penutup bagian tag untuk footer_container, pasta di daerah hak cipta kami lebih rendah yang mencakup link untuk melompat ke atas.

Perhatikan bagaimana href poin ke header ID; ini akan memungkinkan klik di sini untuk melompat hak halaman kembali ke bagian teratas. Kemudian, kita akan meningkatkan ini dengan beberapa menyenangkan scroll.

Ke beberapa styling sekarang; Jika Anda melihat di browser, Anda akan menemukan sesuatu yang mirip ini--tapi jangan khawatir, kita akan memperbaiki situasi!


CSS

Kembali ke atas

Mari kita bekerja pada styling sedikit. Di dalam file style.css Anda, mulai dengan drop di dasar ini di sini. Ini berisi reset dan konfigurasi dasar elemen, dan tentu saja, clearfix mana-mana.

OK, Bagian itu dilakukan... yay; Sekarang mari kita tambahkan di style kita sendiri!

Di sini kita memiliki beberapa setup dasar tipografi, warna dan ukuran.

Sekarang, memberikan beberapa styling untuk daerah atas.

Perhatikan gambar di logo styling; Jika namanya tidak sama, pastikan untuk mengubahnya di sini.

menu yang datang berikutnya. Di sini, kami mengurus posisi dan ukuran teks, serta penanganan multi-level list!

Ada beberapa CSS3 menakutkan di sana, tetapi hal itu menambah kurva cukup sedikit bagian bawah dari daftar drop-down, jadi ambil atau Tinggalkan

Juga, perhatikan bagaimana awalnya kita mulai dengan ul submenu sebagai hidden, dan hanya menampilkan ketika kita arahkan dengan parent list item. Hal ini memastikan bahwa menu masih dapat diakses untuk orang-orang tanpa JavaScript diaktifkan, karena kami akan meningkatkan ini nanti.

Selanjutnya kami akan menambahkan dalam styke struktur lain untuk menangani wrapper utama dan uber fancy slider komponen yang kita tempatkan untuk digunakan.

Melanjutkan, kita akan mengkonfigurasi Bagian footer.

Akhirnya, mari kita styke beberapa teks utama.

Perhatikan akhir class dalam kode di atas, zoom_out dan zoom_in. Ini adalah peningkatan lain untuk popup gambar, untuk menambahkan sedikit suar--Anda akan melihat segera!

Pada titik ini Anda harus memiliki sesuatu di sepanjang baris ini:

Hei, itu tidak terlalu buruk, tetapi perhatikan bahwa beberapa bagian mungkin tidak bekerja sebagai awesomly Namun, karena script untuk membuat mereka fungsi belum dibuat! Jadi, waktu untuk membuatnya.


JavaScript

Kembali ke atas

Bagian ini harus menjadi snap! Sebagian besar, karena kita akan menggunakan beberapa awesome plugin. Pertama atas adalah plugin Cycle, oleh @malsup. Kita akan menggunakan ini untuk membangun slider kami, dan juga PrettyPhoto plugin, oleh @scaron akan digunakan untuk lightboxing kami. Meningkatkan ini akan easing plugin untuk beberapa tambahan, dan localscroll untuk menangani up dan down. Setiap dari link di atas harus link ke halaman penulis dimana Anda dapat menemukan dan men-download script yang Anda inginkan. Setelah kita memiliki plugin download, kita perlu untuk memasukkan mereka dalam kode kita, seperti:

Dicatat bahwa, pada saat produksi, mencoba untuk mengelompokan script ini ke dalam satu file, untuk membatasi jumlah permintaan HTTP.

Pastikan untuk menempatkan ini di footer "setelah" kami memasukan Perpustakaan jQuery, agar ini untuk semua berfungsi. Catat di pikiran kita akan akan menggabungkan semua ini segera. Sekarang untuk membuat ini mengambil efek, kita harus menulis sedikit kecil scripting.

Pertama, ketik baris kode untuk menangani hash tag scrolling ini:

Hal ini memastikan bahwa kami "back to top" tombol akan lancar meluncur kembali. Selanjutnya, mari kita bekerja dengan slider core.

Ini akan menambahkan navigasi bullet untuk slide, dan setup durasi dan easing parameter. Selanjutnya, kami menangani lightbox dengan kode prettyphoto, seperti:

Ini memerintahkan setiap gambar, kami menetapkan prettyPhoto rel, berperilaku dalam cara yang tepat. Untuk merapikan gambar, tambahkan berikut,

Ini akan menambah hover bagus di, memudar keluar efek bila kita mouse gambar. Cantik!

Dan akhirnya menu; Tambahkan potongan berikut, masih di antara tag document. ready

Hal ini hanya membuat yakin bahwa submenu tersembunyi di halaman load, dan kemudian setup animasi berlangsung ketika kita Melayanglah di atas item menu yang sesuai. Sederhana dan menyenangkan!

Oke, sekarang memeriksa halaman dan pastikan bahwa semua fungsi dan JavaScripts bekerja seperti yang diharapkan. Kita sekarang akan menggabungkan beberapa file ini. Pergi ke depan dan buka file yang bernama plugins.js dan dalam paste berikut:

Kami akan memasukan semua kode sumber plugin di antara fungsi ini. Memang, plugin ini dibuat oleh pengembang baik dan telah dibuat dengan tepat, tapi ini adalah kebiasaan yang baik untuk mencegah kemungkinan konflik dengan jQuery namespace. Ambil sumber untuk cycle, easing, localscroll, scrollto dan prettyphoto dan paste setiap satu dalam, satu pada satu waktu, di antara fungsi remap dalam plugins.js. Setelah selesai, Simpan file dan membuka script.js. Di sini, kami akan mengambil semua kode di antara tag script di footer kami dan paste, di dalam satu dokumen siap fungsi.

Sekarang, kita hanya perlu mengimpor 2 file ini dan siap untuk memulai. Setelah selesai, pastikan untuk memeriksa dan memastikan bahwa semuanya masih bekerja dengan benar pada halaman.

Jadi kita menginstal PrettyPhoto plugin dan script nya, tapi kita juga perlu untuk mengambil gambar default dan styling. Jadi ambil folder bernama prettyPhoto dari file plugin yang Anda download; ini akan menjadi dalam folder images. Hanya menyalin folder itu secara keseluruhan ke folder images template. Sementara Anda berada di sana, Salin prettyPhoto.css ke dalam folder css template Anda juga. Pada titik ini, struktur file Anda harus melihat sesuatu yang dekat dengan:

Sekarang, Hei, coba tebak? Me-refresh halaman html Anda untuk melihat beberapa hal yang cukup manis terjadi! Mudah-mudahan, Anda memiliki fungsional menu, slider, dan scrollable dan lightbox imagery. Luangkan waktu untuk bersenang-senang dalam kenyataan bahwa Anda baru saja membuat beberapa keangkeran yang terjadi.

Kembali? Oke, sekarang saatnya untuk mengobrak-anak ini dan templatize untuk homestretch kami tutorial Joomla Template!


Membangun Joomla

Kembali ke atas

Kami sekarang memiliki merupakan situs HTML statis yang berfungsi penuh, dan sudah waktunya untuk templatize raksasa ini. Joomla memiliki struktur file standar yang kita butuhkan untuk dipatuhi. Buat struktur folder seperti, dan pastikan untuk memasukkan semua file--saya akan menjelaskan apa yang masing-masing lakukan segera.

Dimulai dengan component.php; file ini adalah struktur template yang menggunakan Joomla untuk menampilkan konten yang dipanggil dengan parameter komponen. Pada dasarnya, ketika Anda ingin melihat bagian dari situs yang adalah hanya isinya, dan tidak header/footer dll. Untuk saat ini, Anda akan hanya menyalin puya saya untuk penggunaan standar. CSS folder akan menampung, Anda tahu, CSS dan sama dengan gambar. Index.html adalah generik halaman yang menampilkan tidak ada apa-apa, dan itu adalah praktik yang baik untuk menjaga salah satu file kosong index ini di root dari setiap folder yang Anda buat untuk menjaga mencongkel mata pergi.

Index.php menjadi file utama; hampir semuanya akan berlangsung di sini. Template_thumbnail.png adalah, Anda dapat menebaknya, gambar dari template itu sendiri yang akan menunjukkan di bagian admin Joomla, dan template_details.xml adalah file kontrol utama yang membaca Joomla untuk menginstal template Anda. Ini berisi informasi dasar tentang struktur file tema, serta parameter template dan modul posisi nama Anda.

Params.ini file harus berada di sini dan dapat tetap kosong untuk saat ini. Ini akan menjadi sebuah file ditulisi yang menyimpan data parameter template yang Joomla dapat mengakses nanti.

Akhirnya, HTML folder yang mana kami akan menyimpan file untuk mengganti perilaku default Joomla pasti menampilkan jenis, seperti frontpage. Jadi didalam, Anda akan menemukan folder lain bernama frontpage, yang sendiri memiliki beberapa file yang lain. Masing-masing akan diutamakan daripada default file inti yang akan digunakan untuk menampilkan konten frontpage. Keuntungan ini adalah bahwa kita dapat mengubah struktur di sini sepenuhnya, atau cukup menghapus baris kita tidak ingin atau butuh. Pastikan untuk menyalin folder CSS dan Images ke dalam direktori ini untuk template Anda juga.

Menghindari

Untuk mendapatkan ide dari mana file dan folder dalam HTML folder datang dari, masuk ke root instalasi Joomla dan melihat di administrator folder, maka dalam folder components dan akhirnya membuka com_content folder. Anda akan menemukan sebuah daftar komponen inti--komponen cara Joomla yang menampilkan informasi dalam cara yang abstrak dari logika. Ini hanya overview; Anda dapat mengganti hampir setiap aspek output Joomla dengan menambahkan folder ke folder HTML dalam root tema Anda dan membuat file view baru. Misalnya, untuk mengesampingkan output menu utama, Anda akan membuat jalan seperti [YOUR_TEMPLATE_NAME]/html/mod_mainmenu/default.php mana mod_mainmenu adalah nama modul core yang ingin ada timpa.

Memotong-metong menjadi bagian

Jadi, termudah hal pertama; mengambil snapshot dari halaman HTML Anda dan menyimpannya sebagai template_thumbnail.png. Ini harus ditempatkan di root template folder. Untuk index.html, hanya membukanya dan paste berikut di dalamnya:

Membuat beberapa salinan dari file ini dan meletakkannya di root setiap folder.

Wow, dua file sudah!

Sekarang, untuk component.php, saya sarankan Anda menggunakan satu dari download menyertainya, seperti itu terlalu banyak untuk menyisipkan di sini, dan itu hanya perilaku default kita tidak akan disentuh, tapi membantu untuk memiliki tema Anda, tergantung pada penggunaan. Sekali lagi, untuk HTML folder, menggunakan download disediakan dan drop seluruh folder dan isi ke root template Anda.

Saya ingin istirahat hal-hal yang sedikit lebih, sehingga membuat sebuah folder bernama includes, dan, dalam dua folder lain, satu bernama sections, dan scripts. Anda menebak dengan benar: di dalam folder scripts, menyalin semua isi folder js versi folder HTML Anda. Sekarang, kepala ke folder sections dan membuat beberapa file baru:

  • head.php
  • header.php
  • footer.php
  • scripts.php
  • setup.php

Tampaknya seperti banyak, tapi itu benar-benar tidak. Ini adalah hanya metode yang baik untuk memisahkan konten dan menjaga hal-hal menjadi modular sebanyak mungkin. Kita akan mulai dengan setup.php, sehingga membuka satu dan paste berikut dalam:

Ini benar-benar adalah pilihan pribadi, namun, demi kemudahan, saya sarankan Anda mengikuti bersama dengan itu. Pertama, kita menginstruksikan Joomla untuk memasukkan hook ke headnya, sehingga memungkinkan akses fungsi core. Setelah itu, saya secara manual unset mootools yang dimuat secara default.

Simpan dan selesai! Untuk sekarang, kami selesai dengan set up, begitu terbuka head.php dan menambahkan:

Semua yang kita lakukan di sini ke stylesheet dasar kita akan menggunakan, dan memuat Modernizr script. Ini adalah hanya Javascript yang akan dimuat ke bagian head. Atribut href mungkin tampak aneh, dan itu adalah untuk menjaga mereka dinamis seperti mungkin. statement PHP,

hanya menampilkan base URL dari situs Joomla tahu itu, dan kemudian concatenates dengan folder template dan menunjuk ke template kami sendiri. Dengan cara ini, kita dapat dengan mudah mengakses file dan folder kita sendiri. That's it! Simpan head.php dan bergerak sepanjang untuk header.php.

Dalam header paste dalam berikut,

Kode ini membuka tag body dalam cara yang mengagumkan yang memungkinkan kita untuk menargetkan individu versi Internet Explorer. Kemudian, itu menciptakan area bagian dan navigasi yang atas header kami. Akhirnya, kami membuka wrapper utama.

Kode baru di sini adalah statement,

Ini adalah native joomla untuk Joomla yang menjalankan pemeriksaan sebelum halaman menuliskan pada posisi modul tertentu. Ini menentukan apakah ada sesuatu setup untuk pergi ke sana. Jadi, jika kita tidak memiliki membuat menu dan ditugaskan untuk posisi "main_nav" kemudian statment ini akan tidak melaksanakan. Pastikan untuk menutup if statement.

OK menyimpannya; kita sudah selesai untuk sekarang. Sementara kita berada di sini, buka footer.php, dan tambahkan:

Anda sudah tahu apa yang terjadi di sini sekarang. Sekali lagi, kami hanya membuat bagian kami dan menutup situs. Kami juga melakukan beberapa pemeriksaan lain untuk posisi modul sehingga kita dapat menambahkan isi mereka bila diperlukan.

Dan di sini, kami datang ke index.php, daya tarik utama. Tambahkan kode berikut:

Yup, itu adalah segalanya yang tersisa atas! Sekarang atas ke bawah: kita mulai dengan menyatakan Doctype baru dalam mode HTML5. Selanjutnya, kami telah menambahkan kelas no-js ke html tag jika Anda menggunakan Modernizr. Kami segera memasukkan dua file yang kita sudah setup: head.php dan setup.php kami. Saat ini, perhatikan bagaimana kita menggunakan jPATH_ROOT variabel baru untuk menggabungkan cara kami ke dalam template kami. Sekali lagi, kita menjaga hal-hal dinamis seperti mungkin sehingga kita dapat transportasi kode ini di beberapa template. Setelah kami menyertakan bagian atas, kami menutup head dan mulai membangun halaman kami. Termasuk header.php kicks yang off dan membawa di bagian atas kami segera untuk menjadi situs web yang mengagumkan.

Sekarang, buka bagian utama dan masuk ke ke panggilan Joomla lain:

Panggilan ini untuk component ini pada dasarnya memberi tahu Joomla untuk menampilkan di sini persis apa dimasukkan ke dalam editor WYSIWYG untuk halaman saat ini sedang dilihat.

Selanjutnya kami menyertakan file footer.php untuk hal-hal akhir atas, dan kemudian file yang terakhir yang kami ciptakan dalam sections folder, scripts.php.

Apa? Ya aku tahu bahwa file masih kosong! Jadi, mari kita pergi mengisinya. Buka scripts.php dan paste berikut:

Sekali lagi, hal ini, membaca dalam file script kami, dan menjaga mereka tersegmentasi dari kode lainnya. Sekarang, kita menambahkan fungsi kode seperti:

Dan kami bisa untuk pergi. Pindah!


Frontpage

Kembali ke atas

Anda mungkin telah memperhatikan bahwa index.php tampaknya cukup kurang dalam, hal-hal--seperti segala sesuatu yang kita dibangun ke index.html untuk versi pertama. Kenapa bisa begitu? Nah, karena itu untuk homepage kami. Sekarang, kita akan menimpa frontpage Joomla untuk menunjukkan homepage kustom. Kepala ke html folder, dan kemudian ke com_content dan direktori frontpage. Harusnya di dalam ada 2 file PHP; buat satu diberi nama default.php dan satu diberi nama default_item.php. Kita akan merobek 95% dari keberanian dari ini untuk membuat kita sendiri, jadi membuka default_item.php. Jika sesuatu ada, menghapusnya dan menggantinya dengan:

Nice, kanan? Ini adalah menyiapkan output untuk teks apa pun masuk ke dalam komponen homepage. Sekarang buka default.php dan sekali lagi, menghapus semua yang mungkin berada di sana dan paste di:

Ada banyak hal baru di sini, dan ini adalah halaman yang cukup rumit override; Jadi mari kita pergi melalui semua itu.

Karena frontpage benar-benar ditampilkan melalui komponen, Timpa tidak memiliki akses ke directive Joomla standar; kita harus instantiate mereka. Jadi kami membuat objek dan menggunakannya untuk mengambil daftar params yang diatur ketika kami memperbarui parameter pengaturan template. Setelah kita memiliki itu, kita dapat mengambil parameter pilihan seperti yang kita biasanya akan. Kami kemudian menggunakan variabel untuk output info ke slider daftar markup.

class modul yang tidak disertakan secara default baik. Kita perlu membuat sebuah objek untuk itu dan muat yang renderer yang akan memungkinkan kita untuk menampilkan kustom modul yang mana mereka harus pergi. Dua variabel dibuat setelah itu: columns dan images, yang kemudian ditetapkan sama dengan posisi modul masing-masing mereka, sehingga, kemudian ke bawah halaman, mereka bisa dipanggil, menggunakan:

Akhirnya, Bagian jelek di tengah,

Ini adalah satu-satunya bagian yang terus dari default.php asli bagi frontpage, seperti itu adalah bagaimana Joomla berkomunikasi dengan default_item.php, dan memutuskan jika tidak apa-apa untuk output apa pun yang kita miliki di halaman. Aku tahu ada banyak file ini, tapi mudah-mudahan itu membuat beberapa tingkat rasa.

Jika Anda telah bekerja bersama, Anda harus noe mempunyai hierarki file yang terlihat seperti:

Semua yang tersisa tampaknya XML file. Mari kita menanganinya sekarang.

Jelas, merasa bebas untuk mengubah nama dan URL untuk sesuai dengan kebutuhan Anda. File ini set up proses instalasi untuk mendapatkan template kami ke database, sehingga Joomla akan mengenalinya. Setelah Anda memiliki info ini, kita perlu memberitahu Joomla apa yang diharapkan dari folder template kami. Sebelum tag penutup </install>, paste di:

Ingat posisi modul kita yang query sebelumnya? Berikut adalah dimana kami memberitahu Joomla apa posisi untuk mengharapkan secara default:

Jangan khawatir jika Anda kehilangan posisi, karena Anda dapat memasukkan yang baru nanti dari administrasi area jika diperlukan. Akhirnya, tambahkan:

Tunggu, apa adalah bahwa? Senang Anda bertanya. Bukankah lebih keren jika kita bisa mengubah hal-hal dalam template kami dengan cepat dari backend? Ya, itu akan! Ini adalah di mana kita mendapatkan kesempatan untuk men-setup beberapa parameter template. Di semua kejujuran, Anda dapat pergi kacang-kacangan di sini, tapi demi tutorial ini, saya hanya akan menambahkan beberapa parameter dasar.

Mari kita mulai dengan parameter teks sederhana untuk mengatur hak cipta di footer kami. Aku tahu ini seperti backtacking, tapi dengan cara ini, kita belajar cara kedua melakukan hal-hal, dan cara yang lebih baik untuk mengintegrasikan! Tambahkan ini di antara tag params:

Jenis param pertama adalah spacer di mana kita dapat menempatkan label. Membuat catatan ASCII, namun, jika Anda ingin tebal atau huruf miring teks di sana.

Bagaimana stylesheet kedua? Jika demikian, menambahkan parameter ini:

Sekali lagi, perhatikan bagaimana nama parameter style, dan tombol radio memungkinkan satu stylesheet akan dipilih pada satu waktu. Sekarang sebelum kita melompat ke salah satu yang besar, mari kita pertama menyelesaikan pengaturan parameter ini. Jadi buka setup.php dan tambahkan:

Hal ini menciptakan dua variabel yang kita dapat menggunakan untuk menyimpan data input untuk hak cipta dan style, masing-masing. Sekarang, buka head.php dan mengganti panggilan untuk style.css dengan baris ini:

Di sini, kami menggunakan variabel yang kami hanya dibuat untuk menggabungkan ke string untuk file CSS yang kedua kami. Jangan lupa untuk membuat satu! Itu akan menggunakan nilai sebenarnya dari parameter, sehingga default akan menampilkan style.css, dan dark menjadi output dark.css. Menciptakan file CSS yang kedua, yang bernama dark.css dan mengubah apa pun di dalamnya untuk waktu menjadi--hanya demi meninjau perbedaan. Saya membuat header dan footer semua hitam.

Sekarang buka footer.php dan menggantikan

... dengan:

Sekarang kita memiliki satu modul kurang untuk membuat, dan kita memungkinkan data hak cipta harus ditetapkan dalam parameter. Manis! Kembali ke tempate_details.xml, dan menghapus posisi hak cipta. Kemudian, kembali ke area parameter, mari kita setup slider kami.

Di sini, kami membuat lain spacer untuk segmen slider kami dan kemudian beberapa parameter bidang. Satu akan daftar drop-down untuk memilih gambar untuk tampilan, dan yang kedua, caption untuk masing-masing slide. Drop-down daftar gambar bekerja sebagai path; Jadi di dalam folder gambar template Anda, membuat folder baru, bernama slides, dan memasukkan gambar yang Anda inginkan harus dibuat tersedia bagian slider. Pastikan untuk mengubah mana dikatakan "tutorialtemplate" ke nama folder template.


Parameter dinamik

Kembali ke atas

Aku berdebat termasuk bagian ini, tapi itu bukanlah hanya terlalu dingin untuk! Anda melihat bahwa PrettyPhoto memiliki beberapa folder dan banyak CSS? Itu adalah karena memiliki beberapa tema yang built in, yang membuatnya ideal untuk situasi di mana Anda dapat mengubah stylesheet. Kita dapat membuat beberapa parameter yang dinamis untuk mengubah tema yang PrettyPhoto akan menggunakan!

Dalam template_details.xml, tambahkan bagian berikut untuk parameter:

Jadi, kita membuat sebuah label bagian baru dan daftar dropdown untuk memilih tema yang tersedia. Nilai kembali akan menjadi string yang sesuai dengan parameter PrettyPhoto mengharapkan. Untuk menangani hal ini, kita perlu membuat dua suntingan yang lain. Pertama kali membuka setup.php dan tambahkan berikut untuk mengambil parameter yang kita sekarang dapat atur:

Baris pertama di atas menetapkan variabel untuk parameter yang dipilih, dan kemudian kita menambahkan parameter ke array dengan key theme--Anda akan belajar mengapa dalam satu menit. Simpan dan tutup ini, kemudian buka scripts.php.

Menemukan kode:

Dan tambahkan ini di atasnya:

Ini sebabnya kami menempatkan parameter dalam array. Kita dapat menggunakan fungsi json_encode untuk membuat daftar parameter yang dapat kami kirim ke dalam fungsi jQuery. Keren! Begitu ganti parameter fungsi prettyPhoto dengan variabel ini baru, seperti:

Kita sekarang dapat secara dinamis mengubah tema dari bagian parameter template! Memang mengagumkan.

Ide!

Jangan ragu untuk mengambil langkah lebih lanjut dan menambahkan beberapa pilihan transisi ke tampilan slide.


Menginstal Template

Kembali ke atas

Kita harus semua selesai! Wow, bagaimana menarik. Sekarang, zip atas folder ini dan menginstalnya ke instalasi Joomla Anda. Dengan sedikit keberuntungan, akan tidak ada kesalahan!

Melompat ke dalam template manajer, dan menetapkan template baru Anda sebagai default.

Pastikan untuk membuat sebuah halaman baru, yang disebut home dan menetapkannya sebagai frontpage. Di dalamnya, Anda dapat menyisipkan berikut ini, yang akan output dari modul "component" Joomla yang kami meninjau sebelumnya dalam tutorial ini. Harap dicatat: Pastikan untuk memasukkan ini ke tampilan HTML, bukan tampilan WYSIWYG, untuk melestarikan tag.

Berbicara tentang tag pelestarian, kita perlu untuk mengaturnya sehingga TinyMCE editor tidak makan kode kita! Menavigasi ke bagian plugin dan klik pada TinyMCE.

Di sebelah kanan, Anda akan menemukan pilihan untuk menginstruksikan Joomla untuk tidak pernah melakukan "code cleanup on save" Check it, dan menyimpan.

Fiuh, kode aman sekarang! Oke, ke dalam artikel manager dan kembali untuk mengedit frontpage Anda:

Manis. Anda mungkin melihat bahwa gambar Anda tidak muncul. Itu karena path telah berubah /images tidak lagi pergi ke tempat yang digunakan untuk. Pastikan untuk mengubah gambar path Anda ke account untuk ini; cukup tambahkan ke front path, template/YOUR_TEMPLATE_NAME /, dan voila, gambar akan muncul sekali lagi!

Di dalam bagian modul, membuat modul custom html baru, dan di tampilan HTML, paste kode dan teks dari bagian kolom:

Menetapkan posisi di atasnya untuk columns dan menyimpan. Melakukan hal yang sama untuk modul images baru, dan pastikan untuk update gambar path!

Kami begitu dekat... homestretch!

Membuat satu lebih kustom modul html, bernama footer, menetapkannya ke posisi footer dan masukan:

Sebelum kami meninggalkan bagian module, klik pada menu utama modul yang ada secara default, dan menetapkan kembali posisinya sebagai main_nav. Sekarang, melompat ke template admin dan klik pada template kami. Anda harus disambut oleh layar berikut:

Pergi ke depan dan memilih style dan menambahkan beberapa teks hak cipta. Kemudian, pilih gambar Anda dan menetapkan beberapa keterangan untuk slider. klik Simpan, dan coba tebak, waktu untuk memeriksa anak nakal ini! Mengarah ke kanan atas dan klik Tinjauan.

Dengan sedikit keberuntungan, Anda akan melihat frontpage manis dengan beberapa fungsi yang keren. Saya berharap hal ini telah berguna dibaca dan sumber daya untuk Anda. Silakan tinggalkan komentar di bawah ini, jika Anda memerlukan bantuan. Terima kasih untuk membaca.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.