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

Cara Buat Template Joomla Pertama Anda

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Muhammad Hasan (you can also view the original English article)

Dalam tutorial ini, anda akan mempelajari tentang asas-asas templat Joomla , dan buat satu dari awal. Kami akan segera melancarkan pemasangan pelayan tempatan dan Joomla sendiri, dan kemudian membuat templat fungsi asas.


1. Penyediaan

Sebelum memulakan templat kami, terdapat beberapa perkara yang perlu disediakan.
Sama seperti kebanyakan CMS, Joomla memerlukan pelayan dengan PHP dan MySQL dipasang. Secara manual memasang perkara di atas boleh menjadi sangat menjengkelkan dan, jujur, ia membuang masa (melainkan jika anda mahu masuk ke dalam bagaimana ia dilakukan dengan betul).
Apa yang akan kami lakukan ialah memuat turun pemasang tunggal untuk semua perkara di atas yang akan memasangkan pelayan setempat pada sistem anda dan memberi anda juga panel kawalan yang sangat baik.

Jadi pergi ke WAMP dan muat turun versi terkini. ( MAMP untuk Mac)

Selepas pemasang telah dimuat turun, jalankan dan pasang WAMP di tempat yang mudah diingat. Jika semua mengikut rancangan anda akan melihat folder yang dipanggil: wamp

Anda kini juga perlu mempunyai ikon di bar pemberitahuan anda (di mana jam itu) yang memberi anda akses kepada panel kawalan WAMP. Anda boleh menggunakan ini untuk beberapa perkara, termasuk memulakan semula pelayan.


2. Muat turun dan pasang Joomla

Sekarang bahawa pelayan kami dipasang, kami boleh mendapatkan Joomla dan menubuhkannya. Pergi ke Joomla dan muat turun keluaran terkini.

Sebelum kita meneruskan, mari lihat lagi folder kami. Di dalamnya anda akan dapati satu set folder, tetapi apa yang kami sukai adalah folder www.
Inilah akar persediaan pelayan anda dan ini adalah tempat kami memasang Joomla. (nota: Anda boleh memasang seberapa banyak salinan Joomla di sini yang anda mahu, atau apa-apa lagi dalam hal ini)

Jadi, ekstrak muat turun Joomla ke folder www. Saya biasanya menukar nama pada ketika ini ke nama tapak saya atau hanya memendekkannya ke joomla.

Joomla kini berada di pelayan kami. Tetapi ada satu perkara terakhir yang perlu kita lakukan sebelum memasang, dan itu adalah untuk mewujudkan pangkalan data. Buka pelayar anda dan pergi ke http: // localhost .
Di sini anda akan menemui kawasan pelayan admin anda, ini adalah tempat kami membuat pangkalan data kami.

Untuk membuat pangkalan data, klik pada phpmyadmin di bawah bahagian Alias ​​anda.

Untuk tutorial ini, kami akan menghubungi joomla pangkalan data kami. Anda tidak akan membuat pengguna dengan kata laluan di sini, sebaliknya menggunakan butiran pengguna root. Sangat disarankan agar anda membuat pengguna dengan kata kunci yang kuat dalam keadaan sebenar.

Sekarang kita mempunyai pangkalan data, kita boleh mula memasang Joomla. Jalankan penyemak imbas anda dan pergi ke http: // localhost / joomla (atau apa sahaja yang anda panggil tapak anda semasa mengekstraknya.)

Skrin pertama cukup jelas. Pilih bahasa dan tekan seterusnya.

Skrin seterusnya yang anda lihat ialah senarai semak Pra-Pasang. Ini adalah senarai item dan tetapan yang diperlukan untuk berjaya memasang Joomla. Pastikan anda mempunyai konfigurasi yang diperlukan dan klik seterusnya.

Di halaman seterusnya, baca lesen dengan teliti, dan, apabila siap, klik di sebelah dan masukkan butiran yang diperlukan (Nama Hos: localhost, Nama pengguna: root, tiada kata laluan dan joomla sebagai nama Pangkalan Data), dan tekan seterusnya.

Langkau skrin Konfigurasi FTP dengan mengklik seterusnya dan pada halaman seterusnya, masukkan nama tapak anda, alamat e-mel dan pilih kata laluan. Ini akan menjadi kata laluan yang anda akan gunakan untuk memasuki kawasan pentadbir Joomla bersama dengan nama pengguna: admin.
Kami tidak akan memasang data sampel sekarang, kerana kami ingin menambah modul satu demi satu untuk melihat bagaimana template kami akan datang kemudian. Klik seterusnya.

Tahniah! Joomla sedia dan berjalan, tetapi sebelum kita boleh masuk dan bermain, kita perlu memadamkan folder pemasangan. Oleh itu, pergi ke folder www anda di dalam wamp, dan kemudian pergi ke folder joomla dan padamkan folder pemasangan


3. Perhatikan Joomla

Akhir-akhir ini sukar untuk memasuki perbincangan CMS Sumber Terbuka tanpa nama Joomla disebutkan.
Memasangnya dengan panel admin intuitif menjadikannya sangat popular di kalangan pengguna yang mencari CMS yang mudah manakala, pada masa yang sama, ia penuh dengan ciri-ciri yang beribu-ribu pemaju sibuk membina aplikasi dan modul.
Sekiranya perlu, bawa ke hujung belakang (saya cadangkan artikel Joomla 101 yang pendek ini pada blog Themeforest untuk mendapatkan perasaan yang cepat.)

Untuk melawat tapak anda, klik pratonton di sudut kanan atas kawasan admin. Apa yang anda akan dapat ialah templat lalai tanpa kandungan dan modul yang paling asas dimuatkan.


4. Templat

Untuk mula memahami struktur templat, mari kita lihat yang lalai. Pergi ke folder www anda, kemudian dalam folder joomla anda mesti melihat folder template.
(wamp / www / joomla / templates). Di sinilah semua templat berbeza. Anda boleh menukar antara templat dalam panel admin.

Dalam folder templat, anda akan melihat folder untuk setiap templat yang dipasang. Joomla datang dengan tiga templat: beez, rhuk_milkyway dan ja_purity. Ingat lokasi ini kerana ini adalah tempat anda akan memasang templat baharu anda pada masa akan datang.

Walaupun kebanyakan template terdiri daripada beberapa fail, hanya dua yang diperlukan untuk membuat template berfungsi. Mereka adalah:

  • index.php
  • templateDetails.xml

Yang pertama - index.php - adalah di mana semua markup di mana anda memasukkan Joomla termasuk. Ini boleh dilihat sebagai cangkuk kecil di mana joomla menutup maklumat, seperti modul

Fail kedua adalah templateDetails.xml. Anda boleh melihat ini sebagai senarai arahan kepada Joomla. Senarai ini mesti termasuk nama template, nama fail yang digunakan dalam templat (imej dan lain-lain ...) dan kedudukan yang anda mahu gunakan (termasuk yang disebutkan di atas.)

Di atas adalah contoh fail templateDetails.xml. Seperti yang anda dapat lihat, ini adalah senarai khusus yang memberitahu Joomla mengenai templat, seperti nama, pencipta, tarikh dibuat, dan sebagainya ...
Perhatikan kedudukan dalam kod di atas. Inilah kedudukan yang kita telah bincangkan sebelumnya, termasuk.
Ada yang jelas, seperti kaki.
Jika anda meletakkan joomla termasuk footer di kawasan footer reka bentuk anda, anda akan dapat mengawal beberapa aspek footer menggunakan hujung belakang Joomla. Mari cuba dan gabungkan templat mudah.


5. Mula templat

Mari buat beberapa persiapan supaya kita ada sesuatu yang perlu dilakukan. Buka folder templat anda, dan buat folder baru. Mari kita panggil template_tut.

Dalam folder baru anda, buat fail bernama index.php, dan yang lain dipanggil templateDetails.xml (salin / tampal kod dalam contoh di atas di dalamnya).

Buka fail index.php anda dalam notepad atau apa sahaja yang anda gunakan untuk mengedit kod itu, dan salin / tampal yang berikut:

Kami mempunyai DOCTYPE, kod PHP untuk bahasa, dan dalam bahagian kepala Joomla kami yang pertama. Ini bukan dalam senarai xml kerana ini bukan kedudukan.

Apa yang dilakukannya ialah memasukkan kod header joomla (termasuk tajuk halaman), dan banyak perkara lain yang mungkin mengisi separuh tutorial itu sendiri.

Lengkapkan markup pada halaman dengan menambahkan tag tubuh dan tutup tag html.


6. Menggunakan templat

Setelah kami mempunyai fail asas, mari tambahkan lagi, kali ini untuk memaparkan kandungan utama setiap halaman yang dipaparkan.

Anda kini mesti mempunyai ini di index.php anda

Sebelum kami menguji templat kami, mari tambahkan artikel supaya kami mempunyai beberapa kandungan. Pastikan WAMP berjalan dan masuk ke kawasan admin anda di Joomla dengan http: // localhost / joomla / administrator

Sekarang masukkan butiran masuk anda

Buka Kandungan dalam menu dan kemudian ke Pengurus Artikel dalam drop down

Klik Baru untuk menambah artikel

Berikan tajuk artikel anda, isi alias, pastikan ia diterbitkan ke halaman depan dan tekan save

Mari lihat apa artikel kami kelihatan di muka hadapan. Klik pratonton di sudut kanan atas selepas menyimpan. Anda mesti melihat halaman depan laman web anda dengan teks anda.

Sekarang kita telah menerbitkan kandungan, mari kita lihat apakah template yang kita buat sebenarnya berfungsi. Kembali ke kawasan admin anda dan klik Pelanjutan dan kemudian Pengurus Template

Anda harus melihat template_tut dalam senarai, jadi pilih, dan tetapkan sebagai lalai.

Pratonton akhbar dan semak templat baru yang bagus. Nah mungkin ia tidak baik tetapi template joomla pertama anda. YAY!


7. Tambah beberapa kandungan ke templat kami

Kami membuat template kami berfungsi, ini mengambil maklumat header termasuk tajuk dan memaparkan kandungan yang kami buat di joomla kembali. Sebelum menambah lebih banyak termasuk lebih banyak, mari lihat lebih dekat dengan memasukkan kedudukan modul; yang kami namakan dalam fail xml kami.

Mereka termasuk dalam cara berikut:

Jadi untuk menambah, sebagai contoh, kedudukan kiri, index.php kami akan kelihatan seperti ini:

Walaupun kita berada di sana, mari tambahkan kedudukan footer

Jika anda kembali ke kawasan admin anda, dan pergi ke Pengurus Modul anda akan melihat modul di sana, modul Menu Utama. Modul ini dipasang walaupun kami memilih untuk memasang versi Joomla yang mudah.

Menu ini dihubungkan ke kedudukan kiri (yang kami letakkan dalam templat kami), jadi mari lihat apa yang kelihatannya. Tekan pratonton

Seperti yang anda lihat, kami kini mempunyai menu dengan pautan ke Laman Utama. Anda boleh menambah lebih banyak item menu dan memaut ke kandungan yang berbeza melalui Pengurus Menu.

Mari dapatkan footer kerja. Buka Modul Pengurus, klik baru dan pilih Footer. Kemudian tekan seterusnya.

Di halaman seterusnya, berikan modul baru tajuk: Footer, dan dalam dropdown Posisi, pilih Footer.

Klik simpan dan kemudian pratonton halaman.
Sekarang anda juga perlu melihat maklumat footer pada templat anda.


8. Tambah lebih banyak kedudukan dan modul

Mari kita mengaturkan halaman kita sedikit supaya kita dapat melihat apa yang kita lakukan. Dalam folder template_tut anda membuat folder baru dan namakannya "CSS", dan membuat fail di dalamnya dipanggil 'template.css "

Masukkan termasuk di index.php di beberapa div dan bungkus semuanya dalam div bekas dan kemudian tautkan helaian gaya anda sebagai contoh. Jangan teragak-agak untuk menyalin susun atur saya yang salah jika anda tidak menggunakan salah satu daripada anda sendiri. Saya melakukan ini dengan pantas untuk tutorial ini.

dan CSS

Mari kita mengaitkan sidebar kanan dan header dengan kedudukan. Tambah kedudukan teratas ke kedudukan header dan kedudukan kanan ke bar sisi kanan.

Sekarang mari buat modul untuk kedua-dua jawatan. Pergi ke kawasan pentadbir Joomla, log masuk jika perlu, dan masukkan Pengurus Modul di bawah menu lungsuran Pelanjutan. Anda mesti melihat Menu Utama dan Footer yang kami buat sebelum ini. Ikuti langkah yang sama untuk membuat dua lagi modul. Modul Carian yang akan anda letakkan di kedudukan teratas, dan modul Login yang akan anda letakkan di kedudukan yang betul.

Pratonton halaman anda, anda kini perlu mempunyai bar carian di header dan borang login di bar sisi kanan anda. Ini cukup asas-asas template Joomla. Anda membuat kedudukan dalam reka bentuk anda, seperti pautan kecil untuk Joomla untuk menghantar maklumat, yang dalam kebanyakan kes anda membuat di hujung belakang. Anda boleh menggunakannya untuk hampir semua reka bentuk dengan menggunakan banyak jawatan yang ditawarkan oleh Joomla. Saya harap ini berguna untuk anda semua, ingat bahawa ini adalah perkara yang sangat asas, template Joomla boleh menjadi kompleks dan kuat seperti yang anda mahukan.


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.