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

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

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


ویرایشگر وردپرس

حال ممکن است بدانید که شما می توانید از وردپرس بین ویرایشگران متن و ویژوال در وردپرس به جلو و عقب پرش کنید تا برخی از CSS را برای ایجاد چیزهایی مانند دکمه ها و بلوک های متنی پرتاب کنید ، اما این یک درد است و اگر ندارید. تجربه ویرایش کد ویرایشگر متن کمی ترسناک است.

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

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

با افزودن کد ، سبک های سفارشی را به ویرایشگر ویژوال WordPress اضافه کنید

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

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

عملکرد myprefix_mce_buttons_1 (دکمه $) function
array_unshift (دکمه $ ، "سبک انتخاب")؛
دکمه های $ بازگشت؛
}

add_filter ('mce_buttons_1'، 'myprefix_mce_buttons_1')؛

در یکی از پست های WordPress خود به ویرایشگر بروید و اکنون باید یک دکمه جدید “Formats” در ردیف بالای ویرایشگر مشاهده کنید. توجه کنید که ما چگونه به “mce_buttons_1” وصل شده ایم؟ این دکمه منوی فرمت ها را در ردیف اول ویرایشگر mce قرار می دهد. همچنین می توانید از فیلتر “mce_buttons_2” استفاده کنید تا آن را در ردیف دوم یا “mce_buttons_3” قرار دهید تا آن را در ردیف 3 قرار دهید.

بنابراین ، اکنون که مورد فهرست را فعال کرده اید ، وقت آن رسیده است که سبک های دلخواه خود را برای استفاده در پست های خود اضافه کنید. کد ذکر شده در زیر را بگیرید و آن را در حالت خود قرار دهید توابع.php پرونده ای که 2 سبک جدید را به عنوان کشویی فرمت ها اضافه خواهد کرد – “دکمه تم” و “برجسته”.

/ **
* اضافه کردن سبک های سفارشی به کشویی فرمت های mce
*
*url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
عملکرد myprefix_add_format_styles ($ init_array) {
$ style_formats = آرایه (
// هر کودک آرایه ای یک قالب با تنظیمات خاص خود است - هر تعداد که می خواهید اضافه کنید
آرایه(
'title' => __ ('دکمه تم' ، 'دامنه متن') ، // عنوان برای کشویی
'selector' => 'a' ، // عنصر برای هدف قرار دادن در ویرایشگر
'کلاس' => 'دکمه تم' // نام کلاس که برای CSS استفاده می شود
),
آرایه(
'title' => __ ('Highlight'، 'text-domain')، // عنوان برای کشویی
'inline' => 'دهانه' ، // دور یک محتوا را انتخاب کنید
'کلاس' => 'برجسته متن' // نام کلاس مورد استفاده برای CSS
),
)؛
$ init_array ['style_formats'] = json_encode ($ style_formats)؛
بازگرداندن $ init_array؛
}
add_filter ('tiny_mce_before_init'، 'myprefix_add_format_styles')؛

می توانید عناوین را برای نشان دادن نام های مختلف در منوی کشویی خود تغییر دهید ، آیتم ها را از آرایه اضافه کنید و حذف کنید. موارد دیگری را در این کد می توانید تغییر دهید تا سبک های قالب سفارشی خود را فاش کنید ، حتماً وردپرس Codex برای توضیح عمیق تر پارامترهای پذیرفته شده و مقادیر برگشتی.

اکنون که استایل جدید دارید می توانید محتوا را در ویرایشگر خود برجسته کرده و سبک ها را اعمال کنید. توجه کنید که قالب “دکمه تم” چگونه یک پارامتر انتخاب کننده دارد؟ این بدان معنی است که این سبک فقط می تواند برای آن انتخاب کننده خاص اعمال شود (در این حالت برچسب “a” یا “پیوند”). قالب دوم که “Highlight” را اضافه کردیم ، یک پارامتر انتخاب کننده ندارد بلکه یک پارامتر “درون خطی” است که به آن می گوید که این سبک را برای هر متنی که در ویرایشگر خود برجسته کرده اید بکار رود و آن را با یک نام کلاس منحصر به فرد خود بپیچید. می توانید نمونه ای از موضوع Total WordPress را در مورد نحوه استفاده ما از قالب ها مشاهده کنید تا کاربران بتوانند به راحتی لیست چک را در مورد هر گلوله در ویرایشگر اعمال کنند.

چک لیست

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

.دکمه تم {
نمایش: inline-block؛
بالشتک: 10 15px؛
رنگ: #fff؛
زمینه: # 1796c6؛
تزئین متن: هیچ.
}
.تم-دکمه: شناور
تزئین متن: هیچ.
کدورت: 0.8؛
}
.متن برجسته
زمینه: # FFFF00؛
}

اکنون ، این می خواهد یک ظاهر طراحی را به فرمت های جدید شما برای جلو اضافه کند ، بنابراین در صورت اعمال می توانید آنها را به صورت زنده مشاهده کنید. بله اما خوب نیست که سبک های خود را هنگام ویرایشگر در ویرایشگر واقعی نیز مشاهده کنید؟ برای این کار باید از عملکرد “شیوه نامه ویرایشگر” در وردپرس استفاده کنید. اگر می خواهید موضوع خود را بسازید ، می خواهید یک فایل css جدید در موضوع خود ایجاد کنید با نام “editor-style.css” (می توانید آنرا هر آنچه که می خواهید نام ببرید فقط مطمئن شوید که قطعه زیر را مطابق با آن ویرایش کنید) با CSS سفارشی برای فرمت های خود اضافه کرده و سپس عملکرد زیر را اضافه کنید تا در باطن بارگذاری شود.

عملکرد myprefix_theme_add_editor_styles ()
add_editor_style ('editor-style.css')؛
}
add_action ('init'، 'myprefix_theme_add_editor_styles')؛

اگر با موضوع شخص دیگری کار می کنید ، پس باید آن را در موضوع فرزندتان اضافه کنید ، فقط حتماً آن را به یک نام منحصر به فرد اختصاص دهید تا با موضوع والدین شما مغایرت نداشته باشد یا اگر موضوع والدین شما از قبل دارای پرونده CSS است ویرایشگر شما می توانید در واقع آن را کپی کنید و آن را در موضوع فرزند خود جایگذاری کنید (بدون اضافه کردن کد PHP در بالا) سپس CSS جدید خود را اضافه کنید زیرا WordPress قبل از بارگذاری فایل CSS ویرایشگر تم والدین ابتدا موضوع کودک را بررسی می کند و اگر آن را پیدا کرد آن را پیدا می کند. به جای آن ، آن را از موضوع کودک بارگیری کنید.

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

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

پلاگین سبک های سفارشی TinyMCE

به سادگی جستجو ، نصب و فعال سازی آن را انجام دهید افزونه TinyMCE Custom Styles و آن را در سایت وردپرس خود فعال کنید.

تنظیمات سبک های سفارشی TinyMCE

قابل اعتماد و متخصص تنظیمات> TinyMCE prof.styles در سمت چپ داشبورد وردپرس خود قرار دهید. اینجاست که تنظیمات خود را برای افزونه تغییر می دهید.

تنظیمات سبک های سفارشی TinyMCE

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

سبک های سفارشی TinyMCE افزودن جدید

هنگامی که تنظیمات را ذخیره می کنید ، دکمه Add New Style را انتخاب کنید.

گزینه های سبک سفارشی TinyMCE

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

قالب سبک های سفارشی TinyMCE

اکنون زمان آن رسیده است که ببینیم سبک سفارشی جدید در ویرایشگر شما چگونه به نظر می رسد. یک پست یا صفحه جدید را باز کنید و منوی کشویی Formats را در سمت چپ ویرایشگر ویژوال پیدا کنید. در خط دوم نشان داده می شود. هنگامی که روی منوی کشویی کلیک کنید ، سبک جدیدی که تازه ایجاد کرده اید را نشان می دهد.

قالب سبک های سفارشی TinyMCE در حال استفاده

روی گزینه Big Blue Button یا هر آنچه که ایجاد کرده اید کلیک کنید تا در ویرایشگر خود فاش شود. برای استفاده از آن ، به سادگی متن مورد نظر خود را برجسته کنید ، سپس بر روی گزینه و voila کلیک کنید!

نتیجه

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

اگر سؤالی در مورد نحوه اضافه کردن سبک های دلخواه به ویرایشگر تصویری وردپرس دارید ، در بخش نظرات به ما اطلاع دهید. و در صورت تمایل به اشتراک گذاشتن هر سبک غیر معمول شما ایجاد کرده اند تا سایت شما کمی زیبا تر به نظر برسد!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map