2 Cara Membuat Tulisan Arab di WordPress agar Terlihat Bagus

Cara membuat Tulisan Arab di WordPress sebenarnya cukup mudah. Sobat MangCara hanya perlu menambahkan kode yang ada di artikel ini agar mudah membuat tulisan atau teks arab di situs wordpress sobat.

Sebagian orang mungkin merasa kesulitan ketika menulis huruf Arab di platform WordPress. Jika kita hanya menyalin dan menempel dari sumber lain, tampilan postingan kita mungkin tidak akan menarik bagi pembaca.

Saat ini, WordPress telah menjadi salah satu platform paling populer untuk membuat dan mengelola situs web. Dengan fitur yang terus berkembang, menambahkan tulisan Arab tidak hanya mudah, tetapi juga mendukung penggunaan karakter Arab dengan baik.

Untuk mempermudah penggunaan huruf Arab di WordPress, ada beberapa langkah yang dapat diikuti. Setidaknya terdapat dua cara paling mudah yang  dapat sobat MangCara ikuti untuk memasukkan teks Arab agar terlihat rapi dan menarik.

1. Cara Membuat Tulisan Arab Menggunakan Script Code

Penjelasan (Boleh diskip, caranya ada di bawah)

Untuk membuat teks bahasa arab di dalam situs wordpress, kita bisa menggunakan kode html dan css style.

HTML dan CSS Style

berikut ini adalah contoh kode HTML dan CSS yang dapat Anda gunakan untuk menambahkan teks Arab pada situs WordPress Anda:

Pertama, buatlah sebuah div dengan kelas khusus untuk teks Arab, sebagai contoh:

<p class="teks-arab">Teks Arab</p>

Selanjutnya, tambahkan gaya CSS untuk mengatur tampilan teks Arab tersebut:

.custom-paragraph {
    background: white;
    line-height: 1.6;
    text-align: right;
}

.custom-text {
    font-size: 20.0pt;
    font-family: 'Traditional Arabic', serif;
    color: #212121;
}

Atau jika code HTML dan CSS Style digabung:

<p style="
    background: white;
    line-height: 1.6;
    text-align: right;
">
    <span style="
        font-size: 20.0pt;
        font-family: 'Traditional Arabic', serif;
        color: #212121;
    ">
        Teks Arab
    </span>
</p>

Ganti tulisan “Teks Arab” sesuai dengan teks yang Anda inginkan.

Contoh:

<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>

Langkah-langkah Menerapkannya pada Situs WordPress

Tempelkan kode di atas ke dalam editor teks atau bagian HTML/Text di dalam editor WordPress. Pastikan untuk menyimpan perubahan.

Hasil pada postingan:

السلام عليكم ورحمة الله وبركاته

Dengan menambahkan kode tersebut, Anda dapat menambahkan teks Arab ke dalam halaman atau posting WordPress Anda. Pastikan untuk menyesuaikan jenis huruf, ukuran teks, dan gaya sesuai dengan preferensi dan desain situs web Anda. Sebagai catatan, penggunaan metode ini pada versi AMP (Mobile Version) akan mengakibatkan perubahan pada jenis huruf Arab, sehingga tidak sejalan dengan tampilan mode desktop.

2. Cara Membuat Tulisan Arab dengan Embedding CSS Style

Penjelasan (Boleh diskip, caranya ada di bawah)

Penggunaan CSS untuk menambahkan gaya (style) tertentu ke dalam elemen HTML menggunakan class. Penggunaan CSS untuk memodifikasi tata letak dan tampilan elemen HTML ini termasuk dalam konsep pengembangan web yang umum disebut sebagai styling.

Penggunaan @font-face:

@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');
} 

1. @font-face adalah aturan CSS yang memungkinkan definisi font khusus untuk digunakan dalam dokumen. Di sini, font diberi nama “LPMQ”.
2. src: Menentukan sumber font. Terdapat beberapa sumber yang berbeda, termasuk versi OpenType yang disematkan (embedded-opentype), WOFF (Web Open Font Format), dan TrueType.

Penggunaan Class .arabic dan p.arabic:

.arabic {
    font-family: LPMQ;
    text-align: right;
    padding-left: 32px;
} 

p.arabic {
    font-size: 25px;
    line-height: 60px;
}

1. .arabic: Ini adalah class CSS yang mendefinisikan gaya untuk elemen-elemen yang memiliki class “arabic”. Di sini, font yang telah didefinisikan sebelumnya dengan nama “LPMQ” akan digunakan, teks akan diatur ke kanan (text-align: right), dan akan ada padding kiri sebesar 32 piksel.
2. p.arabic: Ini adalah class CSS khusus untuk paragraf dengan class “arabic”. Paragraf ini akan memiliki ukuran font sebesar 25 piksel dan tinggi baris (line height) sebesar 60 piksel.

Penggunaan pada HTML:

<div class="arabic">
    <!-- Konten Arabic -->
</div>

<p class="arabic">
    <!-- Paragraf Arabic -->
</p>

Di dalam elemen HTML, class “arabic” akan diterapkan pada elemen <div> dan <p>, sehingga gaya yang telah ditentukan dalam CSS akan diterapkan pada elemen-elemen ini.

Langkah-langkah Membuat Tulisan Arab

Langkah-langkah Menambahkan CSS ke dalam template wordpress

Menambahkan CSS pada situs WordPress

1. Copy Code di bawah ini

/* CSS Code mangcara.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;
}

2. Pergi Tampilan > Sesuaikan. Scroll ke bawah sobat akan menemukan menu CSS Tambahan

3. Paste code di atas yang sudah di copy. Kemudian klik Terbitkan.

Note: Selain cara di atas, Anda juga dapat menambahkan lembar CSS secara langsung melalui Editor Berkas Tema atau Panel Kontrol Hosting Anda.

Menambahkan kode ke editor teks atau bagian HTML/Text (Seperti cara pertama)

<p class="arabic" dir="rtl">Teks Arab</p>

Ganti tulisan “Teks Arab” sesuai dengan teks yang Anda inginkan.

<p class="arabic" dir="rtl">السلام عليكم ورحمة الله وبركاته</p>

Hasil pada postingan:

السلام عليكم ورحمة الله وبركاته