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

Mengembangkan BuddyPress Themes - Bagian 1: BuddyPress API dan loop

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Gustiawan (you can also view the original English article)

Bulan lalu, kami melihat dasar-dasar BuddyPress dan bagaimana Anda dapat menggunakannya untuk meningkatkan jaringan sosial dalam proyek Anda. Respon banyak dan banyak meminta tema tutorial. Jadi, dalam tiga bagian seri ini, kami akan menjelaskan beberapa unsur-unsur inti BuddyPress API dan membongkar cara membuat tema kustom child yang akan bertahan pada BuddyPress dan update WordPress.


Dengan semakin banyak klien yang mencari jaringan sosial, kami menawarkan basic BuddyPress dan dampak yang dapat membawa ke proyek-proyek Anda. Sekarang, kami ingin menyelam ke dalam mengembangkan tema child yang disesuaikan dengan kebutuhan Anda dan yang akan cuaca diperbarui untuk BuddyPress dan WordPress. Baru-baru ini, saya mencari dalam repositori tema untuk BuddyPress kompatibel tema dan bertemu dengan hasil pulang kekalahan 19! Tak perlu dikatakan, ini adalah pasar yang bisa menggunakan beberapa untuk dikembangkan. Meskipun ada plugin di luar sana yang dapat membuat tema Anda kompatibel dengan BuddyPress, aku selalu menjadi pendukung dari memahami bagaimana untuk melakukan sesuatu sendiri dan tidak bergantung sepenuhnya pada plugin. Selain itu, menciptakan basic child theme adalah sebuah proses cukup mudah, dan satu patut dipelajari jika Anda berencana untuk mengembangkan dengan BuddyPress.

Apa yang akan kita lakukan

Dalam tutorial ini, saya akan memandu Anda melalui beberapa unsur-unsur inti BuddyPress API dan melalui langkah-langkah dasar untuk membuat tema child BuddyPress kustom. Pada akhir tutorial ini, Anda harus dapat memahami:

  • Cara menggunakan BuddyPress Templat Tag
  • Bagaimana mengenali dan menyesuaikan BuddyPress loop
  • Cara menggunakan BuddyPress conditional dalam tema Anda
  • Bagaimana untuk membuat dan mengedit basic tema child BuddyPress

Tutorial ini akan meletakkan dasar bagi 2 bagian berikutnya, yang akan berisi lebih mendalam teknik ketika bekerja dengan elemen tertentu dalam BuddyPress seperti kelompok-kelompok dan forum.


Memulai dengan BuddyPress API

Jika Anda telah bekerja dengan WordPress, maka Anda tahu pentingnya memahami bagaimana untuk bekerja dengan fungsi tertentu, action, hook, dan filter. Anda juga menyadari bahwa ketika Anda memahami hal ini lebih baik, proyek Anda pergi lebih cepat dan Anda dapat menyelam lebih lengkap ke menyesuaikan tema dan plugin. Tidak ada yang berbeda dengan BuddyPress.

Aku ingin pertama berjalan Anda melalui beberapa elemen kunci APi BuddyPress: template tag, loop dan conditional. Itu adalah harapan saya bahwa seperti kita menjelajahi elemen-elemen ini dan kemudian bagaimana membuat tema child yang Anda akan dapat mengambil apa yang tertulis di sini dan berlaku untuk membuat tema child BuddyPress kustom Anda sendiri.

Bekerja dengan BuddyPress Templat Tag

Untuk mulai dengan, mari kita lihat di BuddyPress fungsi yang core untuk pengembangan tema - template tag. BuddyPress codex memiliki daftar ini di sini juga untuk referensi Anda. Tag template ini sangat penting untuk benar-benar menyesuaikan tema, dan seperti Dan Davies menyarankan dalam artikelnya wp.tutsplus hari, Anda harus memiliki beberapa ini di speed dial jika Anda berencana untuk melakukan banyak tema pembangunan di BuddyPress. Beberapa dari mereka adalah persis sama seperti template tag di Wordpress, yang harus juga menghemat waktu jika Anda memiliki pengalaman merancang template di WordPress.

Berikut adalah daftar singkat dari beberapa template tag dari header ke footer untuk digunakan dalam pengembangan tema Anda:

    Header dan navigasi

  • get_header() - tag template yang sama seperti WordPress. Ini memasukan file header.php tema Anda.
  • bp_get_loggedin_user_nav() - menampilkan link navigasi situs untuk pengguna login. Ia juga menambahkan class "current selected" ke item nav yang sedang dilihat sehingga Anda dapat membuat beberapa CSS kustom untuk mengubah tampilan item daftar.
  • Post dan Content Formatting

    Tag template ini tag yang sama digunakan untuk memformat dan menampilkan konten di WordPress. Mereka beroperasi di loop WordPress yang sama juga. Untuk melihat contoh ini dalam action ini, membuka tema bp-default dan buka index.php. Baris 15-61 memberikan contoh yang bagus dari WordPress loop bekerja dalam BuddyPress.

  • the_content()
  • the_excerpt
  • the_tags()
  • the_category()
  • Pengguna dan Info anggota

    Untuk melihat Tag ini langsung membuka members/menber-loop.php dan members/single.php dalam bp-default.

  • bp_loggedin_user_avatar() - menampilkan avatar saat ini login pengguna.
  • bp_loggedin_user_domain()-menampilkan pengguna saat ini yang login URL.
  • bp_member_permalink - menampilkan URL dari halaman profil anggota.
  • bp_member_avatar - menampilkan anggota avatar. Ini dapat digunakan dalam anggota lingkaran untuk membuat daftar pengguna global.
  • bp_get_user_firstname()
  • bp_group_member_joined_since()
  • Kelompok

    Untuk melihat Tag ini langsung membuka grup/kelompok-loop.php dan groups/single.php dalam bp-default.

  • bp_group_permalink() - menampilkan link ke halaman home grup tertentu.
  • bp_group_avatar() - menampilkan grup avatar.
  • bp_group_description_excerpt() - menampilkan Deskripsi grup sebagaimana ditentukan oleh kelompok admin.
  • bp_get_group_name()-
  • Kegiatan

  • bp_sitewide_activity_feed_link() - menampilkan link untuk kegiatan situs RSS feed.
  • Form pencarian

  • bp_directory_groups_search_form() - menampilkan form pencarian yang akan melalui semua grup publik dan aktivitas mereka.
  • bp_directory_forums_search_form() - menampilkan form pencarian yang memungkinkan untuk pencarian berdasarkan melalui isi forum.
  • bp_directory_members_search_form() - menampilkan form pencarian yang memungkinkan untuk pencarian berdasarkan konten anggota dan info.
  • Termasuk

  • locate_template() - ini digunakan untuk menyertakan template seperti bentuk sidebar dan Cari. Untuk memasukkan sidebar tampak seperti:

    Anda juga dapat menggunakan tag template ini untuk menampilkan form pencarian template. Untuk ini dalam tindakan, carilah file index.php bp-default.

  • Pagination

  • bp_groups_pagination_count()
  • bp_groups_pagination_links()
  • bp_members_pagination_count()
  • bp_members_pagination_links()
  • bp_activity_pagination_count()
  • bp_activity_pagination_links()
  • Selain ini, tag template pagination lain ada untuk jenis konten yang berbeda. Hanya mengganti kata "groups" di tag template di atas dengan kata-kata: forum, blog, group_members, atau pesan, untuk menyertakan link atau menghitung untuk loop mana Anda menggunakan. Ini loop yang diteliti lebih mendalam di bawah ini.

    Footer

  • get_footer()

Bekerja dengan BuddyPress loop

Seperti yang saya sudah sebutkan di atas, Anda dapat menggunakan default WordPress loop dalam tema Anda untuk menampilkan post dan post meta content. BuddyPress juga mengandung loop sendiri masing-masing bertanggung jawab untuk menampilkan jenis konten BuddyPress-spesifik. BuddyPress termasuk loop untuk: kelompok, anggota, stream aktivitas, topik forum, blog, anggota grup, pesan pribadi, dan data profil. Sementara ini tampak sangat mirip dengan standar WordPress loop, masing-masing memiliki sendiri variabel tertentu yang juga memungkinkan untuk kustomisasi lebih besar.

Pastikan untuk menyelam ke bp-default theme file untuk mendapatkan pemahaman yang lebih baik dari loop dan menggunakan spesifik mereka. Masing-masing jenis konten yang akan memiliki folder dimana file loop tertentu berada.

Mari kita lihat Ikhtisar satu per satu, dan beberapa cara-cara khusus bahwa Anda dapat menyesuaikan layar mereka.

Kelompok Loop

Kelompok loop digunakan untuk menampilkan daftar situs grup. Loop terlihat seperti ini:

Parameter berikut ini paling berguna ketika menyesuaikan loop kelompok:

  • type - secara default ini diatur ke active, tetapi juga bisa menerima berikut: terbaru, populer, acak, abjad, sebagian-forum-topik, sebagian-forum-posting.
  • per_page - secara default, BuddyPress loop menampilkan 10 kelompok per halaman, tetapi dengan memasukkan nomor baru, Anda dapat mengubah itu.
  • id - dengan menetapkan id pengguna, hanya kelompok-kelompok yang pengguna adalah bagian dari akan ditampilkan. Misalnya, untuk menampilkan hanya kelompok-kelompok yang saat ini login pengguna adalah bagian dari, kodenya:

Mari kita lihat contoh loop, disesuaikan dengan menggunakan parameter di atas. Tepat setelah pembukaan braket masukkan berikut ini:

Karena kami menggunakan beberapa argumen, saya mengatur variabel bernama args yang dapat menangani sebuah array. Saya kemudian set tipe populer, max per halaman untuk 5, dan id untuk saat ini login id pengguna. Ini akan kemudian menampilkan top 5 kelompok paling populer yang anggota saat ini adalah bagian dari dan kemudian nomor pd halaman buku sisanya.

Anggota Loop

Anggota loop digunakan untuk menampilkan daftar anggota saat ini. Loop anggota standar seperti ini:

Untuk pergi lebih dalam, mari kita memecah kode ini sedikit. Jalur pertama dan terakhir sangat penting, dan memberitahu BuddyPress untuk hanya menampilkan seluruh kode kita jika ada anggota yang hadir untuk ditampilkan.

Selanjutnya, kami memiliki tag template pagination anggota. Ada juga tag template untuk pagination jenis konten lainnya seperti kelompok dan blog. Ini ditulis di atas untuk referensi Anda.

Seperti yang Anda lihat, setiap loop dapat dipecah menjadi potongan-potongan yang mengungkapkan lebih lanjut tentang template tag dan menggunakan mereka. Dalam loop ini sendiri, kita lihat template Tag: bp_member_profile_data, bp_member_permalink, bp_member_avatar, dan bp_member_latest_update.

Argumen bp_has_members() memiliki beberapa parameter yang dapat disesuaikan untuk mengubah daftar anggota yang ditampilkan. Yang paling berguna adalah:

  • type - mengembalikan pengguna aktif secara default. Argumen lain: terbaru, populer, online, abjad, acak.
  • per_page
  • maks
  • user_id - ketika ini ditetapkan, itu mengembalikan hanya pengguna yang teman-teman dari nomor pengguna tertentu.

Stream aktivitas Loop

Parameter yang berguna untuk kegiatan stream loop adalah:

  • display_comments - bila diatur ke "trie", ini akan menampilkan komentar pada aktivitas.
  • per_page - sekali lagi, ini menetapkan bagaimana banyak kegiatan untuk dtampilkan sebelum BuddyPress pagination.

Ada tips lain membantu menyaring aktivitas seluruh situs dan menambahkan komentar dukungan laman loop stream kegiatan di BuddyPress codex.

Forum Topik Loop

Forum topik loop digunakan untuk menampilkan daftar topik forum, yang terakhir dipost pada topik, dan berapa banyak total post di sana di topik, antara lain. Loop terlihat seperti ini:

Parameter yang berguna untuk loop topik forum adalah:

  • type - secara default, loop menarik terbaru, atau terbaru, topik, tetapi Anda dapat menggunakan argumen berikut: tag yang populer, unreplied,. Jika Anda memilih "tag", maka Anda harus juga speficy istilah pencarian.
  • forum_id - dengan menentukan ini, Anda menarik topik forum hanya dari id forum tertentu.
  • search_terms - digunakan dalam hubungannya dengan tipe "tags" untuk mengembalikan hanya topik spesifik dengan kata kunci.

Blogs dari Loop

Blogs dari loop digunakan untuk menampilkan daftar pengguna blog. Loop terlihat seperti ini:

Parameter yang berguna untuk loop blog adalah:

  • type - secara default ini mengembalikan blog aktif, tetapi Anda juga dapat menggunakan argumen: terbaru dan acak.
  • per_page

Kelompok anggota Loop

Loop ini digunakan untuk menampilkan anggota grup tertentu.

Loop pesan pribadi

Pesan pribadi loop digunakan untuk menampilkan pesan pribadi kepada pengguna. Ini juga mencakup sebuah daftar template tag untuk menyesuaikan tampilan.

Profil Data Loop

Profil data loop digunakan untuk menampilkan data profil pengguna.

Sementara BuddyPress mengandung banyak loop, mereka mudah untuk memahami dan menyesuaikan. Dengan mempelajarinya, Anda juga harus mendapatkan pemahaman yang lebih baik tentang bagaimana BuddyPress menggunakan template tag dan conditional dalam tema default. Sekarang, mari kita lihat bagaimana menggunakan BuddyPress bersyarat template tag.

Menggunakan Conditional Templat Tag

Conditional adalah cara yang bagus untuk mudah dan cepat mengembangkan tema kustom yang mengubah didasarkan pada kondisi tertentu. Di BuddyPress, conditional ini akan mulai dengan: bp_is_ dan mereka digunakan untuk menampilkan konten tertentu pada halaman tertentu. Sebagai contoh, jika saya ingin menampilkan sesuatu yang spesifik pada halaman grup home, maka saya akan menggunakan conditional template berikut tag:

Tag template bersyarat saya di sini adalah bp_is_group_home(). Menampilkan sesuatu hanya pada halaman rumah pengguna, saya akan melakukan hal yang sama seperti di atas, tetapi dengan bersyarat template tag: bp_is_home atau bp_is_my_profile.

Untuk daftar lengkap ini, klik di sini.


Menciptakan tema child BuddyPress

Sekarang, mari kita bergerak keluar dari API - Anda dapat bangun dan peregangan selama satu menit jika Anda perlu - dan pindah ke beberapa aplikasi praktis. Sekali lagi, kita berusaha untuk meletakkan dasar bagi kami tema kustom untuk datang di bagian 2 dan 3, jadi mari kita lihat sekarang membuat tema child untuk BuddyPress. Aku tidak bisa menekankan cukup pentingnya. Biarkan saya berbagi beberapa pengalaman pribadi tentang betapa pentingnya titik ini benar-benar adalah. Baru-baru ini, saya membuat kesalahan pemula, dan langsung mengedit file inti BuddyPress tanpa berpikir tentang upgrade dan rilis baru. Aku yakin Anda bisa menebak apa yang terjadi selanjutnya. Itu benar. Aku lupa untuk kembali ke atas dan rilis baru menimpa semua pekerjaan yang saya telah dimasukkan ke dalamnya. Aku cukup kacau dan harus menghabiskan berjam-jam unneccessary memperbaiki kekacauan. Jadi, untuk membantu Anda menghindari hal itu, berikut adalah cara membuat BuddyPress tema child yang kita akan mengedit dan bekerja dalam dua bagian seri tutorial ini.

Meletakkan dasar yang kuat

Pertama, Buat folder baru di wp-content/themes/folder bernama cool-bp-theme. Ini akan menjadi tema child BuddyPress kami. Jika Anda bingung tentang apa "child tema", hanya berpikir itu sebagai tema yang akan tetap tampil dan fungsi seperti tema bp-default di wp-konten/plugins/buddypress/bp-tema/bp-default, tetapi akan memungkinkan untuk mengedit dan kustomisasi dan tidak akan error ketika Wordpress atau BuddyPress di upgrade. Hal ini dengan hanya mengubah file template terletak di folder tema child kami. Itu bahkan menggunakan stylesheet bp-default, tetapi memungkinkan stylesheet yang baru yang akan diimpor atau CSS asli untuk ditimpa di style.css.

Setelah membuat folder baru, buat baru kosong functions.php file (karena saya berharap untuk mengedit beberapa fungsi), dan file style.css baru dengan kode berikut:

Elemen inti di sini yang berbeda adalah bais template, di mana aku mengikat ini ke tema bp-default sehingga membuat tema child. Sekarang saya ingin melangkah lebih jauh dan impor stylesheet bp-default standar. Untuk melakukan itu, di bawah kode ini saya masukkan:

Sekarang, Anda memiliki dasar-dasar tema child BuddyPress. Jika Anda menelusuri Appearance--> Themes di Wordpress dashboard Anda, Anda akan melihat tema child pada tema, dan, ketika Anda mengaktifkannya, Anda harus melihat persis apa yang akan Anda lihat jika Anda mengaktifkan bp-default.

Duplikat, Pindah, dan mengedit

Karena tema child sekarang aktif, mengedit template, kita hanya melakukan hal berikut:

  1. Duplikat file yang kita ingin mengedit dari tema bp-default.
  2. Memindahkan berkas tersebut digandakan - menjaga nama file yang sama - ke folder tema child kami baru. Anda juga dapat menyalin file lama ke folder tema baru.
  3. Mengedit file. Ketika Anda mengedit, Anda segera akan melihat perubahan dalam penampilan tema Anda.

Untuk contoh cepat cara untuk melakukan ini, mari kita lihat menambahkan menu header kustom yang saya diajarkan dalam bulan lalu BuddyPress tutorial.

  1. Salin header.php ke folder tema yang baru.
  2. Buka file functions.php kosong yang Anda buat sebelumnya dan tambahkan berikut:
  3. Sekarang buka header.php, dan ganti baris 79 dengan berikut:
  4. Sekarang, membuka situs Anda dan melihat bagaimana daftar lama halaman telah dihapus. Pergi ke Appearance--> Menus dan membuat menu header baru!

Bagian terbaik dari semua adalah bahwa ini adalah perubahan permanen dan tidak dapat dihapus karena upgrade!


Kesimpulan

Kesimpulannya, saya berharap bahwa aku sudah mengatakan berulang kali, ini adalah dasar bagi Anda untuk membangun. Saya berharap bahwa tutorial ini telah memberi Anda pemahaman yang lebih dalam BuddyPress API, dan bahwa ia telah membantu Anda menjadi lebih akrab dengan unsur-unsur membentuk BuddyPress tema. Dalam bagian mendatang, kita akan menguraikan tema child kami saat ini untuk membuat theme yang terlihat dan terasa seperti kita ingin dengan menggunakan template tag, loop, dan conditional. Dengan melakukan itu bersama-sama, saya berharap untuk membawa kepada Anda sebuah tempat di mana Anda dapat nyaman membuat tema baru dengan BuddyPress.

Terima kasih untuk membaca dan saya berharap saya telah membantu Anda belajar sesuatu yang baru tentang themeing dengan BuddyPress dan API!

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.