Membuat Tema untuk Anchor CMS

() translation by (you can also view the original English article)

Kita akan membuat tema khusus untuk CMS open source "up and coming", Anchor. Anchor adalah sistem manajemen konten super cepat, ringan dan cepat. Anda dapat mengambil salinan Anchor dari situs web Anchor CMS, ditambah Anda juga dapat memeriksa beberapa tema yang tersedia untuk Anchor di Anchor Themes.

Mengapa Saya Ingin Melakukan Itu?

Mungkin Anda seorang perancang web atau pengembang ujung depan dan Anda mencari cara untuk mengambil langkah lebih jauh? Mungkin Anda memiliki prototipe HTML statis dari sebuah situs web, Anda ingin dapat membuat laman dan artikel dengan cepat, tetapi Anda tidak ingin repot menulis kode setiap kali. Anchor CMS akan memberi Anda kontrol itu tanpa memberi Anda sakit kepala pengembangan.

Apa yang saya butuhkan?

Artikel ini mengasumsikan setidaknya pengetahuan dasar tentang desain web dan konsep pengembangan, seperti hosting situs web dan pengkodean HTML. Anda akan membutuhkan instalasi CMS Jangkar yang berfungsi, yang dapat dipasang secara lokal atau jarak jauh. Untuk menginstal Anchor (lokal atau jarak jauh), unduh saja salinannya dan ikuti petunjuk pemasangannya.

Seiring dengan instalasi Anda, Anda akan memerlukan prototipe tema Anda. Prototipe harus berupa visual HTML yang ditandai dengan jelas, dengan stylesheet dan aset apa pun yang Anda gunakan, seperti gambar dan JavaScript. Untuk mendemonstrasikan seluruh proses ini, saya akan membuat tema juga. Anda dapat melihat tema saya di bawah ini, dan Anda dapat mengunduh prototipe HTML dari tautan di bagian atas laman:

Saya suka berpikir untuk Anchor adalah seperti membuat sandwich, dan saya tahu banyak orang yang menyukai sandwich yang baik. Jadi saya harap referensi saya membantu Anda dalam mencoba memahami langkah-langkah yang saya lalui. Selain itu, saya lebih memilih untuk mencantumkan apa yang sebenarnya dilakukan oleh beberapa fungsi di Anchor, karena ini sepertinya lebih mudah untuk menjelaskannya.

Memulai

Lapar? Ayo makan..

Dapatkan Breadboard & Bahan-Bahan Anda

Sama seperti sistem manajemen konten lainnya, Anchor memiliki direktori hanya untuk tema. Jika Anda pergi ke root instalasi Anda, akan ada folder bernama "themes". Buat folder baru di sini dan beri nama apa pun tema Anda akan dipanggil, dalam kasus saya saya akan memanggil tema saya "Cleat":

Anda juga harus membuat "about.txt" file. Ini hanya file teks dasar yang menjelaskan apa tema yang disebut, siapa itu oleh dan informasi rujukan. File "read me" pada dasarnya. Lihatlah contoh saya di bawah ini:

Theme name:  	Cleat
Description:	A light and pure theme thats simple at heart.
Author name:	David Darnes
Author site:	http://david.darn.es
License:		http://licence.visualidiot.com

Seiring dengan file about.txt Anda, tempatkan file prototipe Anda di folder juga. Yang terbaik adalah menjaga aset Anda, seperti gambar, di sub folder terpisah. Untuk membuat tema, kita akan mengambil bongkahan HTML Anda dan menempatkannya ke dalam file php ramah Anchor.

Mentega Roti Anda

Sebagian besar situs web disusun dengan tajuk, footer, dan sedikit di tengah. Anchor CMS mengambil keuntungan dari kesamaan ini dengan memungkinkan Anda memecah tema Anda ke dalam bagian terpisah ini. Ini membantu dengan organisasi dan konsistensi yang lebih penting.

Buat file baru di folder tema Anda yang disebut "header.php". Buka file ini dan file HTML Anda untuk prototipe. Salin HTML dari bagian paling atas, hingga tepat sebelum bagian utama konten Anda dimulai. Dalam kasus saya itu hanya setelah menu. Saya memutuskan ini karena dalam desain saya semuanya dari menu ke atas identik di setiap halaman, jadi saya ingin tetap konsisten sepanjang tema saya.

Apa yang sekarang akan kita lakukan adalah mengganti informasi statis dengan pembantu php yang disediakan di Anchor. Di bawah ini adalah kode yang saya salin dari bagian atas prototipe HTML saya, tetapi dengan beberapa perubahan:

<!DOCTYPE html>
<html>
	<head>
		<title>
			<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?>
		</title>
		<!-- Asset links -->
		<link href="<?php echo theme_url('assets/style.css'); ?>" media="screen" rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" href="<?php echo theme_url('assets/favicon.ico'); ?>" type="image/x-icon">
		<!-- Meta -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="generator" content="Anchor CMS">
	</head>
	<body>
		<section>
			<header>
				<a class="logo" href="<?php echo base_url(); ?>" title="<?php site_description(); ?>"><?php echo site_name(); ?></a>
				<!-- Main Menu -->
				<hr/>
			</header>

Perhatikan bahwa HTML masih ada, tetapi saya telah mengganti konten apa pun atau informasi yang relevan dengan situs dengan cuplikan kode PHP. Potongan-potongan kode PHP ini disebut fungsi, mereka bertindak seperti placeholder untuk konten. Ketika tema digunakan, fungsi-fungsi ini akan diganti dengan konten yang diambil dari situs web. Berikut adalah daftar fungsi yang saya gunakan untuk mengganti konten:

<?php echo page_title(); ?> - Menghasilkan judul halaman, semudah itu.
<?php echo theme_url('assets/image.png'); ?> - Digunakan untuk mendapatkan url aset di folder tema Anda, gunakan ini untuk stylesheet dan gambar apa pun yang Anda gunakan.
<?php echo site_description(); ?> - Deskripsi situs yang ditetapkan di bagian metadata dari Anchor.
<?php echo site_name(); ?> - Nama situs, juga disetel di Anchor.
<?php echo base_url(); ?> - url root instalasi, yang seharusnya juga merupakan alamat situs utama.

Jika Anda terjebak dengan fungsi-fungsi ini, atau Anda membutuhkan sesuatu yang berbeda dengan apa yang saya tunjukkan di atas, periksa Anchor CMS Docs.

Tambahkan Menu Lezat

Membuat menu dalam tema Anda cukup mudah setelah Anda memahami cara kerjanya. Anchor menghasilkan menu dari semua halaman yang diterbitkan yang Anda buat. Halaman apa pun yang disetel ke draf, atau diarsipkan, tidak akan muncul di menu.

Untuk memanfaatkan halaman yang diterbitkan ini, kita memerlukan cara untuk memilih dan menjalankannya. Lihatlah contoh saya di bawah ini:

<?php if(has_menu_items()) : ?>
	<nav role="main">
		<?php while(menu_items()) : ?>
			<a href="<?php echo menu_url(); ?>" title="<?php echo menu_title(); ?>"><?php echo menu_name(); ?></a>
		<?php endwhile; ?>
	</nav>
<?php endif; ?>

Dengan menggunakan ini, kita dapat mengizinkan tema untuk membuat menu untuk situs web. Baris 1 adalah tempat kita memeriksa "jika ada item menu", pada baris 3 kami menanyakan "saat Anda meminta mereka melakukan ini dengan setiap item menu". Pada baris 5, kita berhenti bekerja dengan item menu itu, yang berarti itu akan memulai proses yang sama dengan item berikutnya. Setelah kehabisan item menu, ia akan melewati baris 5 dan ke baris 7, di mana ia mengakhiri seluruh proses pembuatan menu.

Setiap kali item menu di-iterasi, serangkaian fungsi diproses juga:

<?php echo menu_url(); ?> - Mendapat tautan dari item menu.
<php echo menu_title(); ?> - Judul item, alias judul halaman.
<php echo menu_name(); ?> - Nama sebenarnya dari item menu, ditambahkan di opsi halaman.

Bandingkan ini ke menu Anda dan ganti konten dan informasi di menu Anda dengan fungsi-fungsi di atas. Catat bagaimana kode menu berfungsi, karena mengetahui proses ini akan berguna untuk posting nanti di tutorial.

Beri Mentega Potongan Lainnya

Sama seperti file header.php Anda, Anda akan mengambil bagian footer dari markup Anda dan tempelkan ke file baru bernama "footer.php". Didalam tema, saya memiliki saluran utama dan saluran kredit, ini muncul di setiap halaman sehingga saya akan menempatkan HTML bagian ini ke dalam file footer.php.

				<hr/>
				<small class="credit"><a href="https://github.com/daviddarnes/cleat" title="Cleat: GitHub">Cleat</a> for <a href="http://anchorcms.com" title="Anchor CMS Homepage">Anchor CMS</a>, Created by <a href="http://david.darn.es" title="David Darnes: Designer">David Darnes</a></small>
			</footer>
		</section>
	</body>
</html>

Footer Anda mungkin tidak memiliki kompleksitas yang sama seperti header, tetapi ini adalah tempat yang bagus untuk mengkreditkan hal-hal seperti diri Anda untuk membuat tema.

Sekarang setelah Anda memberi mentega pada roti Anda, kita dapat pindah ke bagian yang lezat, isi.

Tiga Kandungan Utama Anda

Untuk memenuhi semua jenis konten yang akan ditangani tema Anda, kita perlu membuat tiga file berbeda. File-file ini berada di antara header dan footer Anda dan akan menampilkan posting Anda, artikel dan halaman Anda masing-masing.

Posting Kandungan

Sama seperti yang kita lakukan untuk header dan footer, salin area utama markup Anda ke dalam file baru yang disebut "posts.php". Markup harus melanjutkan dari mana header.php Anda tinggalkan dan file footer.php Anda harus melanjutkan dari itu. File posts.php Anda digunakan untuk menampilkan semua tulisan yang diterbitkan dari situs web. Dengan kata lain, halaman blog Anda.

Jika Anda telah membuat prototipe HTML untuk laman blog Anda seperti saya, itu bahkan lebih baik. Sekarang setelah terbagi menjadi file terpisah, kita harus menghubungkannya kembali bersama-sama, ini adalah tempat fungsi "theme_include" masuk. Di bagian paling atas file posts.php, tambahkan yang berikut:

1	<?php theme_include('header'); ?>

Fungsi ini menarik file header.php ke dalam halaman, dan dengan menambahkannya di bagian paling atas tempat itu akan ditempatkan. Hal yang sama berlaku untuk footer, tambahkan yang berikut ini ke bagian paling bawah posts.php:

1	<?php theme_include('footer'); ?>

Menggunakan metode ini berarti bahwa header dan footer Anda tetap konsisten di seluruh tema dan membuat mengelola kode menjadi tugas yang jauh lebih mudah.

Membentuk Post Loop Relish

Ingat apa yang saya katakan tentang menjaga metode menu dalam pikiran? Lihatlah ini dan lihat apakah Anda dapat menemukan kesamaan apa pun:

<?php theme_include('header'); ?>
<?php if(has_posts()) : while(posts()) : ?>
	<article>
		<header>
			<h1>
				<a href="<?php echo article_url(); ?>" title="<?php echo article_title(); ?>"><?php echo article_title(); ?></a>
			</h1>
			<small><?php echo article_date(); ?></small>
		</header>
		<p><?php echo article_description(); ?></p>
	</article>
<?php endwhile; endif; ?>
<!-- Pagination -->
<?php theme_include('footer'); ?>

Ada beberapa kesamaan, bukan dengan nama fungsi, tetapi bagaimana cara kerjanya. Pada Baris 2, kita menyatakan “jika memiliki pos dan sementara kita memiliki pos tersebut”, jalankan melalui setiap pos. Setelah kehabisan posting, proses berakhir pada baris 12. Dan sama seperti menu, posting juga melalui serangkaian fungsi. Berikut adalah fungsi dalam beberapa detail lebih lanjut:

<?php echo article_url(); ?> - Mendapat tautan pos.
<?php echo article_title(); ?> - Judul posting.
<?php echo article_date(); ?> - Saat posting dibuat, dalam format hari bulan tahun.
<?php echo article_description(); ?> - Deskripsi posting, bidang opsional dalam posting.

Sama seperti yang Anda lakukan dengan menu Anda, bandingkan fungsi-fungsi ini dengan markup Anda dan ganti konten dan informasi dengan fungsi-fungsi yang cocok.

Ini luar biasa; kita memiliki header, footer dan postingan semua yang ditarik masuk.

Rasa Kerja Anda Sejauh Ini

Ini mungkin pertama kalinya Anda dapat memeriksa tema untuk melihat apakah bekerja. Masuk ke Anchor dan pilih tema Anda dari opsi tarik-turun di dalam Extend > Site Metadata.

Jika Anda mengikuti petunjuk ini dengan benar sejauh ini, Anda seharusnya dapat melihat halaman posting Anda.

Jika ada kesalahan, jangan khawatir, itu mungkin hanya sedikit tidak pada tempatnya. Gunakan ini sebagai kesempatan untuk membaca kembali dan periksa apakah Anda sudah mengambil semuanya.

Musim Dengan Paginasi

Sekarang, beberapa dari Anda mungkin berkata, "Bagaimana jika saya memiliki terlalu banyak posting?". Yah jangan khawatir, karena saya akan membahasnya sekarang, dengan cara yang sangat mudah. Lihat cuplikan kode ini:

<?php if(has_pagination()) : ?>
	<nav class="pagination">
		<?php echo posts_prev(); ?>
		<?php echo posts_next(); ?>
	</nav>
<?php endif; ?>

Anda akan melihat bahwa pagination dibuat dengan cara yang serupa, tetapi lebih sederhana tentang bagaimana menu dibuat. Pada baris 1, kita menanyakan apakah jumlahnya melebihi batas, kemudian buat tombol berikutnya dan sebelumnya. Pada baris 6, kita akhiri prosesnya.

Catatan: Jumlah posting per halaman dapat dipilih di bawah Extend > Site Metadata.

Kode ini harus masuk dalam file posts.php Anda, tetapi tidak di dalam salah satu loop lainnya. Dalam desain saya, hal tersebut muncul tepat sebelum footer, jadi saya telah menambahkannya ke bagian paling bawah dari file posts.php.

Mengisi Artikel

Sehubungan dengan halaman posting, artikelnya sangat sederhana. Sekali lagi Anda akan membutuhkan salinan dari bagian utama markup prototipe Anda, atau salinan HTML yang ingin Anda gunakan untuk artikel. Sama seperti posts.php Anda, ini harus cocok dengan kode header dan footer Anda. Dalam contoh saya, artikel memiliki judul, tanggal, dan konten.

Buat file baru bernama "article.php" di folder tema Anda, dan tempelkan markup di dalamnya. Anda juga harus menambahkan header dan footer Anda termasuk fungsi, seperti yang Anda lakukan untuk file posts.php. Untuk tema saya, kode untuk artikel minimal:

<?php theme_include('header'); ?>
<article>
	<header>
		<h1><?php echo article_title(); ?></h1>
		<small><?php echo article_date(); ?></small>
	</header>
	<?php echo article_markdown(); ?>
</article>
<?php theme_include('footer'); ?>

Sekali lagi, terlepas dari fungsi-fungsi include, semua yang telah saya lakukan menggantikan informasi statis dan konten dengan fungsi-fungsi tertentu yang disediakan oleh Anchor. Berikut ini laporannya:

<?php echo article_title(); ?> - Judul posting.

<?php echo article_markdown(); ?> - Isi pos, salinan isi.

<?php echo article_date(): ?> - Saat posting dibuat, dalam format hari bulan tahun.

Seperti sebelumnya, pelajari kode Anda dan ganti konten statis dan informasi dengan fungsi yang relevan. Setelah Anda menyelesaikan file article.php Anda dapat melihat artikel yang sedang beraksi. Ini memberi Anda kesempatan untuk memeriksa apakah semuanya dalam urutan kerja.

Mengisi Halaman

Anda mungkin tidak mempercayainya, tetapi halaman bahkan lebih sederhana dari artikel. Salin lagi markup Anda, tetapi kali ini tempelkan ke file baru bernama "page.php" dan tambahkan fungsi include di bagian atas dan bawah file. Halaman di situs web biasanya berisi konten statis dan informasi yang tidak sering berubah. Untuk alasan ini, halaman tidak memerlukan tanggal. Lihatlah kode di bawah ini:

<?php theme_include('header'); ?>
<article>
	<header>
		<h1><?php echo page_title(); ?></h1>
	</header>
	<?php echo page_content(); ?>
</article>
<?php theme_include('footer'); ?>

Ini sangat mirip dengan article.php, tetapi hanya menggunakan dua fungsi yang berbeda:

<?php echo page_title(); ?> - Judul halaman.

<?php echo page_content(); ?> - Konten halaman, salinan isi.

Setelah selesai menempatkan dalam fungsi, pergi dan cobalah melihat halaman normal. Konten contoh yang ada dalam Anchor (saat ini) tidak memberi Anda halaman biasa, jadi Anda harus membuatnya dan menambahkan konten.

Potong dan Hidangkan

Jika Anda telah mengikuti tutorial dengan benar, Anda akan ditinggalkan dengan tema sederhana namun solid untuk Anchor CMS. Jika Anda mengalami masalah, ingatlah untuk memeriksa kode Anda dengan hati-hati. Begitu mudah untung melewatkan sebuah karakter, atau menempatkan hal-hal dalam urutan yang salah.

Jika segala sesuatunya tidak berjalan sesuai keinginan Anda, ada komunitas pengguna Anchor CMS aktif yang dapat membantu Anda dengan tema. Cukup kunjungi Anchor CMS Forum dan cari orang yang memiliki masalah serupa, atau mulai diskusi baru.

Saya juga mengelola Anchor Themes, di mana Anda dapat mengunduh tema, memeriksa situs web yang telah dibangun dengan Anchor dan mengirimkan karya Anda sendiri. Saya harap tutorial ini telah membantu Anda membuat tema untuk Anchor CMS, dan saya sangat tertarik untuk melihat apa yang Anda bawa! Nikmatilah.