راست چین کردن در وردپرس با استفاده از وردپرس rtl

RTL-WordPress-hamyarwp

سلام کاربران عزیز؛
افزودن پشتیبانی برای زبان نوشته وردپرس rtl در سیستم مدیریت محتوای وردپرس کار آسانی است! برای تغییر موقعیت افقی نوشته ها، باید از کدهای CSS در فایل style استفاده نمود.
در این مقاله وردپرس برای شما دوستان قطعه کدهایی را در این زمینه معرفی می کنیم. تا شما بتوانید با استفاده از این قطعه کدها، خودتان به راست چین کردن وردپرس بپردازید!!

راست چین کردن در وردپرس با استفاده از وردپرس rtl

برای ایجاد قابلیت وردپرس rtl در بخش های مختلف وردپرس باید از کدهای CSS استفاده کنید. برای این منظور دستورالعمل های زیر را انجام دهید:

  • برای شروع به فایل استایل قالب وردپرس سایت بروید.
  • فایلی را با نام rtl.css ایجاد و ذخیره نمایید.
  • سپس ویژگی های زیر را به بدنه فایل اضافه کنید.
<pre>  direction: rtl;  unicode-bidi: embed;</pre>

حال به بررسی کدهای CSS بپردازید و موارد زیر را انجام دهید:
هر ویژگی غیر مرتبط همانند ویژگی های ظاهری فونت نوشته، رنگ، موقعیت عمودی، عرض و ارتفاع و… را حذف کنید. سپس در ادامه مقدار ویژگی های زیر را تغییر دهید.

  • text-direction ( جهت متن )
  • float ( تعیین موقعیت قرار گیری یک عنصر )
  • clear ( برای پاکسازی اطراف یک عنصر )
<pre> text-align: left;   float: right;   clear: left;</pre>

سپس با اعمال تغییرات به صورت زیر می شود:

<pre> text-align: right;  float: left;  clear: right;</pre>

اضافه کردن نسخه وردپرس rtl به تصاویر وابسته

بعضی از تصاویر فقط برای یک جهت کاملا واضح هستند. حال یک نسخه افقی معکوس برای این تصاویر با استفاده از وردپرس rtl ایجاد می کنیم.
برای معکوس کردن تصویر باید از ویژگی های ( attributes ) زیر استفاده کنید:

  • margin: حاشیه خارجی
  • padding: لایه داخلی. در واقع فاصله بین متن و borders ( خط مرزی ) را تعیین می کند.
  • borders: حاشیه داخلی. حاشیه اطراف متن
  • background-position: تعیین موقعیت بک گراند
  • right/left positioning: تعیین موقعیت عناصر

کد اولیه

<pre>.commentslink{	background:url("./images/comments.gif") no-repeat 0 3px;	padding-left:15px;        margin: 2px 4px 0px 12px;        left: 10px;}</pre>

سپس با معکوس سازی به کد زیر تبدیل می شود:

<pre>.commentslink{	background:url("./images/comments-rtl.gif") no-repeat 100% 3px;	padding-left:0;        padding-right:15px;        margin: 2px 12px 0px 4px;        left:auto;        right:10px;}</pre>

برای دکمه هایی که متن مخفی دارند، از کد text-indent استفاده کنید. شما باید مقدار آن را از منفی به مثبت تغییر دهید. همانند نمونه زیر:

<pre>.image-button{	text-indent:-99999px;}</pre>

پس از ایجاد تغییر به صورت زیر می شود:

<pre>.image-button{	text-indent:99999px;}</pre>

ابزارهای وردپرس rtl

افزونه RTL Tester این امکان را می دهد تا به راحتی با وردپرس rtl  جهت متن خود را تغییر دهید. پس از نصب این افزونه محتوای سایت شما به صورت راست چین می شود.

نکته!! از افزونه WP-RTL برای افزودن قابلیت وردپرس rtl به نوشته ها وبسایت استفاده کنید. با نصب این افزونه دو دکمه به ویرایشگر نوشته های وردپرس اضافه می شود. پس از این شما می توانید جهت متن خود را انتخاب کنید که RTL یا LTR باشد!!

بعضی از فیلدها باید به صورت چپ چین (LTR) باشند. فیلدهایی مثل تلفن، ایمیل و… چه در زبان های LTR یا RTL، باید به صورت چپ چین تنظیم شوند.

با آرزوی موفقیت برای همراهان…

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

397,355 نفر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 2 سال عضو همیار وردپرس

    سلام، وقت بخیر
    من میخوام افزونه رو راست چین کنم، این افزونه انگلیسی هست و میخوام ترجمه کنم و بعد به راست چین تبدیل کنم که فارسی رو بشناسه، افزونه ایی هست که بتونم با اون افزونه رو راست چین کنم؟
    ممنون از پاسختون

    • 3 سال عضو همیار وردپرس

      سلام
      خیر و شما باید از طریق کدنویسی Css این کار رو انجام بدید.

  2. مرسی ایولا داری

  3. سلام. وقتتون بخیر. ببخشین من وردپرس رو به روزرسانی کردم. بعد از به روزرسانی منوها و برخی قسمتهای دیگه چپ چین شده. با این کاری که گفتید مشکلم حل میشه؟ یا راه حل ساده تر و بهتری هست. در ضمن بعضی جاهای سایت هم انگلیسی شده. راهکارش چیه؟ ممنون میشم راهنماییم کنید.

دوره‌های آموزشی