آموزش اضافه کردن استایل های دلخواه به ویرایشگر دیداری وردپرس

ا

اکثر افرادی که در طراحی سایت سر رشته دارند، برای طراحی سایت خود تمایل دارند از استایل های خاصی مانند دکمه های دانلود با شکلی خاص و یا باکس های سفارشی برای محتوا های خود استفاده کنند. اگر دائما از استایل های سفارشی استفاده می کنید، نوشتن کد های html و فراخوانی کلاس مربوطه در CSS قطعا کار سخت و زمان بری خواهد بود.اما همیشه روش میانبری نیز وجود دارد. در این مطلب قصد داریم روشی را به شما آموزش دهیم تا با اضافه کردن یک بخش به ویرایشگر دیداری وردپرس خود، به راحتی و فقط با یک کلیک استایل مورد علاقه ی خود را به محتواهای خود بدهید.

ویرایشگر دیداری

در این روش شما می توانید بدون مراجعه به بخش متن صفحه ی ویرایش مطالب، در همان صفحه ی ویرایشگر دیداری به مطالب خود فرمت و استایل دلخواهتان را بدهید.

توجه: برای شروع این آموزش، نیاز به آشنایی مقدماتی با CSS دارید. در حدی که بتوانید کلاس تعریف کنید و در CSS به آن استایل دهید.

چرا و کی نیاز به اضافه کردن استایل های دلخواه به ویرایشگر دیداری داریم؟

ویرایشگر دیداری وردپرس به صورت پیشفرض، چند مورد استایل و فرمت بندی از پیش تعیین شده دارد. به ظور مثال انتخاب رنگ برای متن، ساختار های h1 تا h6، بولد یا ایتالیک کردن متن و … . اما این استایل ها و فرمت های پیشفرض ممکن است گاهی اوقات برای سفارشی سازی استایل ها پاسخگوی نیاز های شما نباشند. مثلا زمانی که میخواهید یک دکمه دانلود به مطلب خود اضافه کنید و نیاز به استایل خاصی برای تعیین شکل دکمه دارید، امکانات پیشفرض موجود در ویرایشگر دیداری برای ساختن استایل مورد نظر شما کافی نیست.

تنها یک راه برای این کار وجود دارد و آن، این است که به بخش متن ویرایشگر مطلب بروید و در آنجا از کد های Html و CSS برای ساخت یک دکمه دانلود یا هرچیز دیگری استفاده کنید. قطعا این راه بسیار سخت و زمانبر است و اگر همیشه به این استایل ها برای محتوا های خود نیاز داشته باشید، نمی توانید وقت زیادی صرف آن ها کنید.

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

بهترین و مهم ترین مزیت استفاده از این روش این است که شما بدون نیاز به این که در متن خود تغییری ایجاد کنید به راحتی می توانید استایل های خود را آپدیت کنید.

در ادامه به نحوه ی انجام این کار می پردازیم:

اضافه کردن استایل های دلخواه به ویرایشگر دیداری بدون افزونه

در این روش باید چند کد را به فایل های قالب خود اضافه کنیم. فراموش نکنید که حتما قبل از ایجاد تغییرات در فایل های قالب خود، یک نسخه پشتیبان از آنها بگیرید تا در صورت بروز مشکل، بتوانید به راحتی نسخه پشتیبان را جایگزین کنید.

مرحله اول: اضافه کردن منوی پایین افتادنی استایل ها به ویرایشگر دیداری وردپرس

در اولین مرحله باید یک منوی پایین افتادنی به ویرایشگر دیداری وردپرس اضافه کنیم که بتوانیم استایل های مورد نظرمان را از درون آن انتخاب کنیم. این منو با نام ساختار ها به ابزار های موجود در ویرایشگر دیداری اضافه خواهد شد.

کافیست کد زیر را به انتهای فایل functions.php قالب خود اضافه کنید:

مرحله دوم: اضافه کردن گزینه های استایل ها به منو

در مرحله قبل ما منوی پایین افتادنی را ساختیم. حالا باید گزینه ها را به این منو اضافه کنیم. این گزینه ها همان استایل هایی هستند که میخواهیم از آنها در مطلبمان استفاده کنیم.

در این آموزش برای نمونه، ما قصد داریم سه استایل دلخواه را به ویرایشگر دیداری خود اضافه کنیم. یک استایل برای جعبه متن سفارشی و دو استایل برای دکمه های دانلود (یکی دکمه قرمز و دیگری دکمه آبی). پس باید سه گزینه به منوی پایین افتادنی اضافه کنیم.

کد زیر را به انتهای فایل functions.php قالب خود اضافه کنید:

سپس یک فایل با نام post-editor-style.css درون پوشه قالب خود بسازید. حالا تمامی استایل هایی که برای فرمت بندی عناصر درون مطلب ساخته اید را درون این فایل کپی کنید.( همان استایل هایی که در مرحله ی سوم ساختید).

کلام آخر

پس از اتمام این مراحل به راحتی می توانید هرنوع محتوایی را به سرعت و فقط با یک کلیک ساختار دهی کنید و استایلی که مورد نظر خودتان است را به آن ها بدهید. امیدواریم که از این آموزش لذت برده و از آن در کارهای بعدی خود استفاده کنید.

ویرایشگر دیداری

اگر میخواهید به بخش نظرات سایت خود استایل های دلخواه و سفارشی بدهید حتما مقاله استایل دهی به نظرات وردپرس را ببینید.

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)