Cara membatasi karakter/Kata untuk titile produk

Salam kenal Mas atau mbak di forum ini. Disini saya baru belajar ngeblog wordpres dan ingin otak2i coding HTML nya. saya mengalami kendala pada page Product Archive, tinggi box tiap2 produk tidak rata. setelah saya amati karena faktor jumlah judul antar produk ada yang panjang sehingga pada saat di Page Arcive Produk title produk ada yang 1baris dan ada yang 2baris bahkan lebih. Disini untuk toko online saya menggunakan Woocomerce.

Pertanyaan saya, bagaimana untuk membatasi jumlah kata pada Title Produk saat produk dihalaman Archive Product.

Sebagai bahan pertimbangan, mohon diamati gambar dibawah ini :

avatar Rulinurr
@Rulinurr

4 Kontribusi 0 Poin

Diperbarui 7 tahun yang lalu

9 Jawaban:

kalo membatasi jumlah huruf bisa pakai:

 $kalimat='ini kalimat';
$huruf_maksimal=5;

$result=substr($kalimat, 0, $huruf_maksimal);
echo $result; // hasil ini k

kalo untuk membatasi kata bisa buat fungsi explode lalu ambil sampai string yang diinginkan

avatar zeeb
@zeeb

60 Kontribusi 19 Poin

Dipost 7 tahun yang lalu

membatasi kata ya?


<?php

    $title = "Rasang Beam Steal Valve";
    $arr = explode(" ", $title);
    $limit = 3;
    $new = [];

    if (count($arr) > $limit) {
        for($i = 0; $i < $limit; $i++) {
            array_push($new, $arr[$i]);
        }
    }

    if($new) {
        $new = implode(" ", $new);
        print_r($new); // Output : Rasang Beam Steal
    }
    else {
        print_r($title);
    }

?>


<?php

    $title = "Rasang Beam Steal Valve";
    $arr = explode(" ", $title);
    $limit = 4;
    $new = [];

    if (count($arr) > $limit) {
        for($i = 0; $i < $limit; $i++) {
            array_push($new, $arr[$i]);
        }
    }

    if($new) {
        $new = implode(" ", $new);
        print_r($new);
    }
    else {
        print_r($title);  // Output : Rasang Beam Steal Valve
    }

?>

avatar CodenameJR
@CodenameJR

278 Kontribusi 107 Poin

Dipost 7 tahun yang lalu

Jawaban Terpilih

daripada membatasi jumlah karakter secara eksplisit, menurut saya lebih baik menyembunyikan kata yang melebihi width yang sudah ditentukan. kalau lebih dari itu maka title akan terpotong dan muncul tanda (...). contohnya title lebih dari 'Rasang Stem Ball Valve (Copy)' akan menjadi seperti ini

Rasang Stem Ball Valve
Rasang Stem Ball Valve (Co...

caranya cuma pakai CSS aja

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Test https://jsfiddle.net/1phyuvf6/

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 7 tahun yang lalu

Terimakasih sudah menanggapi pertanyaan saya. Maaf saya masih belum mengerti,

Mas @CodenameJR , ini saya menggunakan wordpress dan plugin woocomerce untuk produknya. Untuk Code yang mas kasih diatas nerapinya difile apa ya ?

avatar Rulinurr
@Rulinurr

4 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

@Rulinurr berhubung ane gapernah megang WP, coba ente liat, tempat nampilin dijudul di WP tuh adanya di file apa, misal di file post.php, dicari aja di file post.php, variable mana yang menampung title. tinggal terapin dah.

avatar CodenameJR
@CodenameJR

278 Kontribusi 107 Poin

Dipost 7 tahun yang lalu

@CodenameJR : terimakasih mas, sudah saya coba dibeberapa file mulai dari post.php, single.php masih belum terselesaikan.

kebetulan saya mencoba saranya mas @rachmatsasongko, namun hanya main di CSS woocomerce, alhamdulillah berhasil. Sementara untuk mengatasasi masalah ini saya pakai saran mas @rachmatsasongko.

avatar Rulinurr
@Rulinurr

4 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

@rachmatsasongko : kalau semisal menghilangkan "..." tu bagaimana ya ? agar hasil yang didapat hanya Kata/Kalimat yang terpotong tanpa "...".

Sebab kalau dilihat jika menggunakan "..." kurang rapih.

avatar Rulinurr
@Rulinurr

4 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

https://developer.wordpress.org/reference/functions/get_post/

tuh ada penjelasanya dimana variable title bisa dimanipulasi.

avatar CodenameJR
@CodenameJR

278 Kontribusi 107 Poin

Dipost 7 tahun yang lalu

Kalau mau tanpa ... bisa ganti ellipsis dengan clip


text-overflow: clip;

Tapi ga bisa motong persis di satu kata. Kalau mau pas motong per kata ya pakai cara dari @codenamejr

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban