Tampilkan kategori acak di halaman depan (Mencari dan Mengedit Fungsi Tema)

8

Saya Saat ini sedang dalam tahap alfa mengedit tema anak untuk tema Wordpress. Saya memang memiliki pengalaman pemrograman dan beberapa pengalaman mengelola wordpress tetapi tidak memiliki pengalaman langsung mengedit kode terkait wordpress. Saat ini sedang menampilkan tiga kategori pertama berdasarkan abjad.

Apa yang saya coba lakukan: Alih-alih menampilkan tiga kategori pertama secara alfabet, saya ingin menampilkan 3 kategori acak dengan lebih dari x jumlah produk.

Saya telah mengalami hambatan / pertanyaan berikut yang menghentikan saya melanjutkan.

  1. Mekanisme / fungsi apa yang mengontrol pemilihan kategori-kategori ini? (Kode mereka)
  2. Apakah berdasarkan tema atau sesuatu dalam sistem WordPress yang mendasarinya?
  3. Apa informasi lain yang relevan untuk melakukan perubahan ini?
  4. Informasi apa yang berguna dari Firefox Dev Bar?
  5. Bagaimana cara menemukan "Kode Mereka" sehingga saya dapat menggantinya dengan "Kode Kode Saya"?

Pertanyaan sebenarnya di sini adalah: Bagaimana cara menemukan "Kode Mereka" yang bertanggung jawab atas pemilihan ini menggunakan alat-alat seperti firefox Dev Bar dan sumber yang sebenarnya?

Pertanyaan ini bukan tentang WooCommerce (plugin). Saya mencari cara untuk menemukan fungsi dalam tema yang dirancang oleh WooCommerce (perusahaan) atau dalam tema apa pun.

Tema opensource: WooCommerce Storefront

T. Thomas
sumber
2
Cari tag dengan kategori pembungkus id atau kelas tertentu menggunakan Firefox Developer Inspector. Kemudian, cari kelas ini atau id di file sumber tema. Anda harus menemukan semacam fungsi yang menampilkan kategori. Fungsi menimpa atau menggunakan filter fungsi untuk mengganti kategori.
kierzniak

Jawaban:

11

Pertanyaan sebenarnya di sini adalah: Bagaimana cara menemukan "Kode Mereka" yang bertanggung jawab atas pemilihan ini menggunakan alat-alat seperti firefox dev bar dan sumber yang sebenarnya?

Jika Anda merujuk pada output / sumber HTML, maka misalnya di situs demo tema Storefront resmi , cukup klik kanan pada judul atau bagian "Kategori Produk" dan kemudian Anda dapat dengan mudah memeriksanya section. Lihat dokumen MDN untuk opsi lain seperti ikon "Pilih Elemen".

masukkan deskripsi gambar di sini

Sekarang untuk " sumber aktual " (yaitu kode atau fungsi PHP yang menghasilkan bagian "Kategori Produk" pada Halaman menggunakan templat "Beranda"), Anda dapat menemukannya di inc/storefront-template-functions.php.

if ( ! function_exists( 'storefront_product_categories' ) ) {
    /**
     * Display Product Categories
     * Hooked into the `homepage` action in the homepage template
     *
     * @since  1.0.0
     * @param array $args the product section args.
     * @return void
     */
    function storefront_product_categories( $args ) {

        if ( storefront_is_woocommerce_activated() ) {

            $args = apply_filters( 'storefront_product_categories_args', array(
                'limit'             => 3,
                'columns'           => 3,
                'child_categories'  => 0,
                'orderby'           => 'name',
                'title'             => __( 'Shop by Category', 'storefront' ),
            ) );

            ...
        }
    }
}

Begitu storefront_product_categories()juga fungsi PHP yang Anda cari dan yang bisa Anda timpa sepenuhnya jika Anda mau (lihat https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/# bagian-5 ). Tetapi jika Anda hanya ingin menampilkan kategori produk dalam penyortiran acak, maka Anda cukup menggunakan storefront_product_categories_argsuntuk menyaring argumen kueri (yang dalam kasus Anda adalah orderby):

add_filter( 'storefront_product_categories_args', function( $args ){
    $args['orderby'] = 'rand';
    return $args;
} );

Filter itu dipanggil dari dalam storefront_product_categories()fungsi, dan ini adalah filter / tindakan lain yang dapat Anda gunakan:

  • Saring: storefront_product_categories_shortcode_args

  • Tindakan: storefront_homepage_before_product_categories

  • Tindakan: storefront_homepage_after_product_categories_title

  • Tindakan: storefront_homepage_after_product_categories

Lihat ini jika Anda tidak yakin tentang perbedaan antara "tindakan" dan "filter".


UPDATE: Bagaimana Anda dapat menemukan kode?

Jelajahi melalui dokumentasi tema Storefront :

Saya mencari cara untuk menemukan fungsi dalam tema yang dirancang oleh WooCommerce (perusahaan) atau dalam tema apa pun.

  • Pertama, periksa (dan baca) dokumentasi tema.

  • Jika tidak ada atau Anda tidak / tidak bisa menemukan informasi yang anda butuhkan, kemudian mencoba apa @motivast telah menyarankan - Periksa elemen pada halaman, menemukan kode HTML yang sesuai dan / atau CSS class/ id, kemudian cari file tema untuk itu HTML atau CSS class/ idhingga Anda menemukan file yang tepat atau kode PHP / function.

Misalnya, di situs demo tema Storefront, HTML bagian kategori produk adalah:

<section class="storefront-product-section storefront-product-categories" aria-label="Product Categories">
    ...
</section>

Jadi Anda dapat mencari file tema menggunakan salah satu kata kunci ini: (Saya akan mulai dari kecocokan paling spesifik atau paling dekat dengan HTML yang dihasilkan)

  • <section class="storefront-product-section storefront-product-categories"

  • class="storefront-product-section storefront-product-categories"

  • storefront-product-categories

  • storefront-product-section

Dengan asumsi Anda tidak tahu tentang dokumentasi Storefront / theme, melakukan pencarian di atas pada akhirnya akan membawa Anda ke file yang tepat atau kode PHP / function.

Jika Anda memerlukan bantuan lebih lanjut, beri tahu saya dan saya akan memperbarui jawaban ini.

Sally CJ
sumber
Bagian yang diperbarui untuk jawabannya, tidak berfungsi dengan etalase 2.5.0 Bahkan contoh filter yang diberikan di situs dokumentasi mereka sendiri.
klewis