Cara Posting Huruf Arab di WordPress dengan Mudah dan Indah

Redaksi

syech.com – Bagi sebagian orang menulis huruf arab di wordpress tentulah akan terasa bingung. Bila kita langsung copas dari lembar yang lain tentu hal ini tidak akan indah terlihat di mata pembaca postingan kita.

Namun bagi sebagian lain yang paham bahasa pemrograman maupun coding tentu hal itu tidaklah susah.

Seringkali kita mencari beberapa plugin yang menyediakan font arab dan bekerja otomatis di system, pada akhirnya kita tidak menemukan. Pada kali ini syech.com akan membagikan kepada anda tentang cara membuat font arab terlihat indah dan kita bisa mengatur sesuka kita baik ukuran font, warna maupun jenis font-family yang ada.

Ada 2 cara menurut kami yang paling mudah dan simple cara memasukkan text arab agar terlihat rapi, nyaman dan indah

1. Memasukkan kode html dan Style

Kita bisa langsung memasukkan kode html dan Style dibawah ini

[html]<p style=”background: white; line-height: 1.6; text-align: right;”><span style=”font-size: 20.0pt; font-family: ‘Traditional Arabic’,serif; color: #212121;”>isi tulisan</span></p>[/html]

Caranya pada kita masuk pada tab teks dalam lembar editor kita. Bila anda bingung lihat gambar dibawah ini dan perhatikan tanda merah

 

Silahkan anda klik dan anda akan masuk pada mode teks seperi gambar dibawah ini

 

Silahkan anda Copy Paste script html di atas dan ganti “isi tulisan” dengan huruf arab  yang ingin kamu masukkan

Sebagai Contoh

[html]<p style=”background: white; line-height: 1.6; text-align: right;”><span style=”font-size: 20.0pt; font-family: ‘Traditional Arabic’,serif; color: #212121;”>بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</span></p>[/html]

Hasil Postingan :

بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ

 

Namun dengan cara ini pada AMP ( Mobile Version),  font arab kita akan berubah dan tidak sesuai dengan mode dekstop

2. Menambahkan CSS dan menggunakan class untuk membungkusnya

Untuk cara ini kita bisa menambahkan  CSS pada template kita

[html] /* CSS arab syech.com*/
@font-face{font-family:LPMQ;src:url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.eot);src:url(https://litequran.net/assets/fonts/LPMQ.eot?#iefix) format(’embedded-opentype’), url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.woff) format(‘woff’), url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.ttf) format(‘truetype’)}
.arabic{ font-family: LPMQ; text-align: right; padding-left: 32px; }
p.arabic{font-size:25px;line-height:60px;} [/html]

Untuk menambahkannya kita bisa secara sederhana masuk pada Tampilan > Sesuaikan dan lihat gambar dibawah ini

 

Letakkan Css tersebut diatas simpan dan  terbitkan

Kamu juga bisa menambahkan lembar CSS langsung lewat Editor Berkas Tema atapun Contol Panel Hosting kamu

Kemudian untuk cara postingnya anda bisa masukkan kode html dibawah ini dan tentu saja harus masuk pada mode teks seperti cara yang pertama

[html]<p class=”arabic” dir=”rtl”>Isi tulisan arab</p>[/html]

Ganti “isi tulisan arab” dengan text arab yang ingin anda masukkan dan sebagai contoh lihat hasil dibawah ini:

[html]<p class=”arabic” dir=”rtl”>بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</p>[/html]

Hasil Tampilan Postingan:

بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ

Dari sekian cara dari kami , kami sarankan untuk menggunakan cara yang ke 2 . Karena pada tampilan AMP font tulisan tidak berubah dan sangat nyaman dibaca

Bagaimana , Mudah bukan? Selain itu bila kita ingin mempercantik lagi kita bisa menambahkan CSS seperti background atau text color pada lembar CSS kamu

Lalu bagaimana bila kamu ingin mengetik tulisan Arab langsung? Alangkah baiknya kamu baca Cara Mengetik Bahasa Arab , kemudian kamu salin hasil pengetikkan kamu dalam lembar editor postingan anda

Demikian cara singkat posting huruf arab pada halaman wordpress secara simple dan mudah

Bagikan:

Redaksi

Hobi Menulis dan berbagi informasi