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

Meniru Buku Alamat Apple untuk Web

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Rohmat Trimanto (you can also view the original English article)

Seperti yang kita semua tahu, WordPress sangat luas sehingga Anda dapat menggunakannya untuk hampir semua hal. Bahkan ada artikel di situs dengan judul gila seperti 101 alternatif yang digunakan untuk WordPress. Jadi saya pikir, hei, mengapa tidak? Saya yakin banyak orang ingin membuat Aplikasi Web mereka sendiri, dan pada dasarnya WordPress dapat melakukannya untuk Anda. Dalam tutorial video ini, kita akan membuat Buku Alamat online.


* Catatan Editor: Kami memiliki hadiah istimewa untuk Anda hari ini. Tutorial ini awalnya ditujukan untuk menjadi bagian dari program NETTUTS + kami. Namun, program ini telah mengambil waktu lebih lama untuk diluncurkan daripada yang kami perkirakan. Jangan khawatir, ini masih akan datang! Sampai saat itu, nikmati yang satu ini!

Tutorial ini merupakan usaha besar untuk Harley. Jadi tolong, jika Anda tidak keberatan, luangkan waktu sejenak untuk Digg it! Terima kasih!

Baca wawancara kami dengan Harley!

Final product

Kata pengantar

Buku alamat ini akan memiliki banyak karya. Ajax loading, hal-hal bersyarat admin, shiz. Ini, sayangnya berarti kita perlu memenuhi beberapa persyaratan, beberapa hal yang perlu tema. Salinan jQuery untuk memulai akan berguna. Di atas ini, tema membutuhkan beberapa gambar! Unduh zip ini, yang nantinya akan diperluas ke direktori tema Anda. Akhirnya, salinan Plugin Pencarian Langsung yang saya edit sedikit untuk alasan CSS. Asli di sini

Dan tentu saja, seperti biasa, Anda perlu menjalankan blog WordPress yang dapat Anda akses. Ada tutorial untuk menjalankan Wordpress secara lokal di sini untuk Windows, dan di sini untuk OS X. Karena sifat konten posting, saya sangat merekomendasikan memulai direktori WordPress yang baru.

Jadi Anda harus memiliki: jQuery, gambar, plugin pencarian langsung, dan direktori WordPress. Super.

Langkah 1 - Mengatur file.

Mari kita mulai dengan membuat file yang diperlukan. Di direktori wp-content / themes dari blog WordPress Anda, buat folder bernama 'addressBook'. Tambahkan file jQuery dan gambar ke folder baru ini. 'Live-search-popup' masuk ke folder wp-content / plugins, untuk alasan yang jelas.

Sekarang file yang sudah diunduh sudah ada, kita perlu membuat beberapa file lagi. Di direktori tema, buat: addressBook.js, index.php, single.php dan style.css. Sementara kita berurusan dengan file-file ini, kita akan membuat meta tema. Buka style.css dan tempel + edit ini:

Sekarang Anda telah membuat beberapa informasi dasar untuk WordPress untuk mengenali, arahkan ke halaman pemilihan Tema (Desain> Tema) di wp-admin, dan klik blok AddressBook baru. Untuk saat ini (jika Anda menggunakan versi WP yang menunjukkan pratinjau sebelum aktivasi) Ini akan kosong. Tapi jangan khawatir! Aktifkan itu!

Langkah 2 - Posting Konten

Sekarang semua file ada di sana dan diatur, kita dapat melanjutkan untuk membuat beberapa pos sampel untuk kami. Alasan metode ini bekerja adalah karena WordPress membolehkan bidang khusus. Bidang khusus hanya itu - area konten kustom untuk diisi. Bidang konten posting berbeda dengan bidang tag karena bidang khusus berbeda dengan bidang kategori. Alasannya sangat luar biasa adalah karena itu berarti kita dapat melampirkan bit informasi terpisah ke pos tanpa harus memancing mereka keluar dari konten. Arahkan ke Dasbor, dan tulis pos baru.

Kami akan menggunakan:

  • Judul sebagai nama orang tersebut
  • Posting konten sebagai catatan untuk orang tersebut
  • Kategori sebagai kelompok orang (kerja / rumah terkait)
  • Bidang khusus Untuk rumah, kantor, dan ponsel. Situs web dan email, alamat dan akhirnya gambar mereka.

Sekarang bidang kustom tidak menakutkan karena mereka harus memberi nama (kunci) dan beberapa konten (nilai). Yang keren dari mereka adalah, begitu digunakan sekali, Anda dapat memilihnya dari menu drop down sehingga Anda tidak bingung nama secara tidak sengaja. Selain itu, tidak setiap bidang khusus diperlukan, sehingga Anda dapat membiarkan beberapa kosong jika Anda tidak memiliki informasi spesifik (nanti ketika kami mendapatkanya kami benar-benar akan membuat tautan edit / tambahkan.

Setelah Anda menambahkan beberapa postingan tiruan, kita bisa pindah ke menampilkan konten melalui file template.

Langkah 3 - Kode WordPress

Buku alamat ini (kejutan mengejutkan) akan dimodelkan dari Buku Alamat Apple:

Dikaburkan karena alasan yang jelas, gambar itu juga menampilkan bagian yang mana, jadi lebih mudah untuk memvisualisasikan sementara coding! Kami akan mulai dengan index.php.

index.php

Halaman ini adalah apa yang semua orang akan lihat pertama kali ketika mereka datang ke Buku Alamat Anda, jadi itu harus menjadi informasi. Seperti pratinjau di atas, semua halaman akan memiliki tata letak yang sama - Single.php akan memiliki tampilan dan nuansa yang sama, seperti untuk menciptakan efek yang tidak pernah dimuat ulang. Ini hanya untuk browser JS-kurang, sehingga merendahkan 100% dengan anggun. Maksud saya 100%. JQuery dalam hal ini hanya untuk mempercepat loading konten, dan (akhirnya) fungsi pencarian langsung. Buku Alamat masih perlu bekerja tanpa komoditas ini!

Untuk memulai tema WordPress, saya selalu memiliki beberapa informasi dasar header.

Ubah apa yang ada di antara tag judul menjadi 'Buku Alamat'. Di bawah tautan stylesheet, tambahkan kode berikut, untuk membawa kode JavaScript akhirnya:

Karena semua informasi header dilakukan, kita dapat pindah ke pengkodean bersama tata letak yang terstruktur. Di antara tag body, tambahkan ini:

Bagian-bagian ini akan berisi semua loop posting. Tentunya. Mari kita mulai dengan tajuk. Ini terdiri dari h1 untuk judul, dan bentuk pencarian. Ganti komentar:

Formulir pencarian sebenarnya bukan plugin. Ini karena kita hanya butuh hasilnya, kan? Jadi kami menggunakan fungsi yang berbeda dalam mainSection yang melapisi daftar asli untuk muncul seolah-olah itu memfilter semua data. Rentang yang membungkus teks h1 sehingga kita dapat menambahkan ikon favicon-esque kecil di sebelah kiri.

Bagian grup lebih mudah dan lebih pendek.

MainSection, atau di mana daftar nama berjalan, terdiri dari loop dan hasil pencarian langsung yang menghamparkan daftar ini. Parameter pengecualian berarti tidak menampilkan 'tidak terkategorikan' karena kategori kosong mengganggu!

Terlihat saya sudah memadatkan loop ke jumlah yang sangat kecil. Biasanya ini akan menjadi praktik yang buruk, tetapi untuk aplikasi WordPress ini sebenarnya tidak perlu. Kueri_posts memaksa pengulangan untuk menampilkan 9999 entri alih-alih set default Dasbor. Fungsi ini termasuk dalam cara yang aman, hanya jika plugin diaktifkan. Yang akan kita lakukan sekarang. Buka bagian plugins Dasbor, dan aktifkan plugin live-search-popup. Jika tidak ada maka Anda belum mengunduh dan menginstal plugin. Instal sekarang.

LoadArea di halaman depan pada dasarnya kosong, jadi kita hanya perlu judul penjelasan!

Akhirnya footer. Blok ini memiliki jumlah kode terbanyak, dan merupakan pertemuan pertama dengan status masuk bersyarat! Saya akan menjelaskan sedikit demi sedikit.

Jadi dua tag anchor pertama tergantung pada $ user_ID. Variabel ini memeriksa apakah pengguna masuk (dalam hal ini yang memiliki hak istimewa), kemudian menampilkan beberapa tombol tambah dan edit. Semua php yang aneh pada akhirnya mendapatkan jumlah total Kartu Kontak, sehingga ditampilkan seperti Apple Address Book

Itu untuk indeks! Selanjutnya, kami akan mengerjakan single.php, jadi bukalah dan kami akan mulai!

Single.php

index.php masih harus terbuka, jadi karena pada dasarnya single.php adalah tata letak yang sama, salin SEMUA kode index.php ke single.php, dan simpan.

Karena itu single.php, secara default loop hanya akan menampilkan satu posting. Untuk mengatasi ini, kami telah menambahkan fungsi query_posts di index.php yang sudah siap.

Single.php berbeda dari indeks terutama dengan kode di antara loadArea. Alih-alih h2, loop akan mengisi ini.

Konten Loop, dari sini terdiri dari blok PHP, yang relatif identik (bar gambar dan catatan). $ Query_string adalah cara singkat dan kotor untuk mengembalikan parameter loop kembali ke menampilkan satu posting untuk single.php. Kiriman dimulai dengan gambar.

Kode gila! Yang pertama 'jika' memeriksa apakah Bidang Khusus itu memiliki konten apa pun, dengan membandingkannya dengan nilai apa-apa. Pernyataan 'if' kemudian diperiksa untuk melihat apakah admin masuk, dan jika demikian menyediakan tautan untuk mengedit bidang khusus. Yang aneh (... * posting = <? Php echo $ post-> ID;?> Meta-62). Dengan menggunakan ID pos kami memiliki URL yang berubah secara dinamis yang tetap 100% relevan! Akhir dari URL akan berbeda untuk Anda! Saya memiliki pemilih DOM, tetapi Anda dapat menggunakan firebug untuk mencari ID dari div bidang kustom. Div yang berisi nilai entryImg untuk saya adalah meta-62.

Kita perlu menambahkan judul kecil juga!

Mudah sekali. Berikutnya adalah 'blok' pertama. Semua blok ini relatif sama. Bahkan, setelah email dan situs web awal pertama, mereka hanya karakter statis.

"

Blok Email / Situs Web

Penggunaan berat bidang khusus ... Pernyataan if memeriksa apakah bidang khusus memiliki konten apa pun, dengan memeriksanya ke '' atau tidak sama sekali. Jadi jika tidak ada apa-apa (karena itu memiliki konten), tampilkan. Selain itu tidak memiliki konten apa pun, tampilkan tautan tambah / sunting.

Tepat di bawah ini, salin blok itu dan ubah 'email' di SEMUA tag bidang kustom ke 'situs web', dan bunuh 'mailto:' di nilai href. Jangan lupa untuk mengubah meta-link! Punyaku adalah 57 untuk bidang situs web. Jangan lupa tag yang kuat atau nilai posting edit juga!

Telepon / Blok Alamat

Semua sekarang sama. Anda hanya perlu mengubah empat hal per blok. Nama bidang khusus, tag kuat, nilai dan konten href tautan edit. Ini adalah blok pertama:

Lanjutkan dan rangkap empat ini, satu kali untuk setiap bidang khusus. Anda harus memiliki salah satu dari blok-blok ini untuk: Telepon rumah, telepon kantor, telepon seluler, dan alamat.

Blok Catatan

Akhirnya, kita perlu menampilkan beberapa catatan.

Luar biasa! Itu saja yang diperlukan kode WordPress! Perhatikan bagaimana Telepon Kerja adalah tautan. Nanti kita akan gaya ini di CSS untuk memiliki ikon plus. Saat ini seharusnya terlihat seperti ini:

Langkah 4 - CSS

CSS membuat situs terlihat cantik! Mari lompat langsung ke dalamnya. Kita perlu memulai dengan reset kotor, defenisi tubuh dan latar belakang pembungkus. WrapperBg.png adalah tangkapan layar dari Buku Alamat Apple yang sebenarnya dibersihkan. Kami menambahkan semua barang yang kami butuhkan di atas.

Sudah, jika Anda melihat pratinjau, bentuk jendela sudah ada di sana. Selanjutnya, kita perlu mencari tahu tajuknya. Untungnya, saya telah melakukannya untuk Anda! Yay!

Untungnya, itu semua yang diperlukan untuk membuat header 100% selesai.

Sekarang kita akan menata bagian grup, yang sebenarnya adalah kategori:

Dan kemudian bagian utama tergelincir di samping bagian grup:

Dan dengan itu, semuanya didorong ke area masing-masing, kecuali footer. Jika Anda mencari, overlay akan berada di bawah tulisan yang sudah ada di sana. Jadi kita perlu memposisikan mereka sepenuhnya. Pemilih terakhir di atas melakukan ini.

Area muatan masih perlu ditata. Untuk melihat ini sepenuhnya dalam tindakan, buka satu halaman dengan mengklik pada kontak. Sebelum itu akan terlihat seperti ini:

Masuk ke wp-admin, dan periksa bagaimana tampilannya di satu halaman! Muatannya adalah ketika kita mendapatkan beberapa jQuery terjadi. Tetapi karena itu ditambahkan dalam jQuery, tidak ada salahnya untuk memilikinya di sini.

Bagian terakhir dari bagian CSS adalah memperbaiki footer. Beberapa CSS sederhana untuk melakukan ini. Satu-satunya hal yang menarik di sini adalah Anda harus mengapungkan jumlah kartu ke kanan, seolah-olah Anda memposisikannya dari kiri, itu akan terlihat aneh ketika Anda masuk.

CSS sekarang sudah selesai! Itu berarti, bahwa situs sekarang harus berfungsi penuh dalam browser tanpa jQuery, pada dasarnya selesai. Tapi di sini di NETTUTS, kami ingin bekerja ekstra. Jadi, kami akan berupaya membuat pemuatan kontak dengan AJAX di beranda alih-alih memuat ulang halaman.

Sekarang tantangan kami menimbulkan beberapa masalah. Plugin Live-search-popup menggunakan Prototype, dan sayangnya pengembang tidak mempertimbangkan konflik perpustakaan JS. Jadi ini berarti kita harus menggunakan pemilih yang diperpanjang, dan menentukan pengaturan noConflict. Tidak sulit, hanya sedikit berbeda.

Buka addressBook.js. Di bagian paling atas, kami mendefinisikan noConflict.

Ini adalah metode jQuery untuk memastikan semua kode asli jQuery adalah 100% tout seule, unik dari semua pustaka lain.

Sekarang untuk dokumen siap panggilan. Seperti dengan jQuery apapun, Anda perlu untuk membungkus kode ini.

Tutorial ini menggunakan metode pemuatan yang serupa dengan tutorial NETTUTS. Cara memuat dan menghidupkan konten dengan jQuery. Mari kita mulai dengan acara tersebut.

Sekarang kita perlu mendefinisikan variabel yang berisi semua konten single.php yang berbeda dari index.php. Ini semua bidang khusus.

Seperti halnya pengembang AJAX yang menghargai diri sendiri, yang tidak ingin pamer bahwa mereka dapat menempatkan loader di konten mereka! Pemuat itu sendiri tidak ada hubungannya dengan pemuatan yang sebenarnya, itu hanya ditunjukkan saat pemuatan sedang berlangsung!

Akhirnya, untuk pemuatan yang sebenarnya. Fungsi-fungsi ini menggunakan variabel, dan mengganti apa yang ada di div loadArea dengan konten dalam dari single.php.

Sudah selesai dilakukan dengan baik!

Jika Anda menavigasi ke halaman rumah sekarang dan klik salah satu nama, itu akan memuat secara otomatis! Bahkan memudar dan keluar! Saya ingin ini bekerja pada hasil plugin live-search-popup, namun dimuat melalui prototipe, sehingga jQuery yang diterapkan tidak akan berfungsi dengan baik. Jika tidak, ini menyimpulkan cara Wordpress lain yang luas dapat digunakan untuk potensi penuh sebagai ... Cukup banyak hal!

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.