ویرایش کد های قالب با افزونه WP Editor

با عرض سلام و احترام به شما دوستان عزیز و همراهان گرامی مِستر آموز.

 

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

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

 

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

امکانات

• دارای قابلیت CodeMirror
• دارای محیط کد نویسی
• دارای چند تم برای محیط ویرایشگر کدها در وردپرس
• امکان ویرایش تمام صفحه (F11،ESC)
• امکان جستجوی در متن (CTRL + F)
• تنظیمات منحصر به فرد برای هر ویرایشگر
• دارای FancyBox برای مشاهده تصویر
• مرورگر AJAX
• دارای لیست افزونه‌ها و تم‌ها و نمایش فایل‌های هر کدام همراه با امکان ویرایش
• کارکرد بسیار ساده و کاربر پسند
• و…

نصب و راه‌اندازی افزونه

 

 

در قدم اول افزونه‌ WP Editor را از انتهای همین صفحه دانلود، نصب و فعال سازی کنید.

پس از فعال سازی زیر منوی نمایش یک گزینه جدید به نام WP Editor در پنل مدیریتی وردپرس اضافه خواهد شد.

 

 

عملکرد افزونه
این افزونه این امکان را به شما می‌دهد تا در محیط وردپرس اقدام به طراحی و توسعه کنید!

تنظیمات اولیه افزونه
برای پیکربندی و تنظیم نحوه عملکرد افزونه از پنل مدیریتی وردپرس بر روی منوی WP Editor کلیک کنید.

 

 

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

Main setting: این بخش برای تنظیمات کلی و پایه افزونه است. به صورت پیش‌فرض باقی بگذارید.
Theme Editor: انجام تنظیمات پیکربندی‌ های مربوط به بخش ویرایشگر قالب از این صفحه قابل دسترسی است.
Plugin Edior: این قسمت مربوط به اعمال تنظیمات ویرایشگر افزونه است.
Post Editor: تنظیمات مربوط به پیکربندی ویرایشگر کدها در وردپرس.

 

تنظیمات بخش های ویرایشگر

تنظیمات سه بخش ویرایشگر کدها در وردپرس، افزون و قالب مشابه هم هستند:

Theme: از این بخش می توانید ظاهر و پوسته کادر کدنویسی ویرایشگر را انتخاب کنید.
Extensions: در این بخش اجازه ویرایش فایل‌هایی با پسوندهای منتخب را صادر می‌کنید.
Font Size: این بخش سایز فونت را تعیین میکند.
Line Numbers: برای فعال کردن قابلیت شماره‌گذاری خطوط کدها.
Active Line Highlighting: فعال کردن قابلیت هایلایت شدن کدها.
Indent Size: تعیین سایز تورفتگی.
Tab Characters: هنگام زدن دکمه tab بین کدها فاصله ایجاد شود یا یک تب در نظر گرفته شود.
Tab size: سایز تب.
Editor Height: ارتفاع قسمت کدنویسی.
Enable File Upload: فعال کردن دکمه آپلود فایل‌ها در ویرایشگر افزونه و قالب.

 

نحوه کار با افزونه

بعد از انجام تنظیمات سه ویرایشگر به شما ارائه خواهد شد که در ادامه آن ها را مفصل بررسی می‌کنیم.

ویرایشگر افزونه‌ها: ویرایش افزونه‌ از مسیر افزونه‌ها> Plugin Editor قابل دسترسی است.
ویرایشگر قالب: این بخش جهت ویرایش قالب‌های شما که از مسیر نمایش> Theme Editor قابل دسترسی است.
ویرایشگر مطالب وردپرس: این همان ویرایشگر متنی وردپرس است، البته قابلیت‌های جدیدی به آن اضافه شده.
ویرایشگر افزونه ها در وردپرس: جهت ویرایش و مشاهده فایل‌های مربوط به افزونه‌ها، به مسیر افزونه‌ها > Plugin Editor بروید.

 

به صفحه‌ای مشابه تصویر زیر هدایت خواهید شد.

 

در تصویر بالا از  قسمت بالای صفحه قادر خواهید بود از بین پلاگین‌های نصب شده (فعال و غیر فعال) پلاگین مورد نظر را جهت تغییر، مشاهده و توسعه انتخاب کنید. سپس دکمه select را کلیک کنید.

نکته:

ممکن است افزونه مورد نظر شما در بین موارد موجود نباشدو یا آن را نصب نکرده باشید، که در این صورت شما می‌توانید از قسمت Upload Files در سمت راست صفحه، کمک بگیرید و با کلیک بر روی دکمه Browse افزونه مورد نظر را انتخاب کرده و آن را آپلود کنید.
در نهایت تمامی پوشه‌ها و فایل‌های مربوط به افزونه (تصاویر، فایل‌هایcss و…) برای شما لیست خواهند شد. با دابل کلیک بر روی هر گزینه ، قادر به مشاهده کدهای آن در پنجره کدنویسی خواهید بود.
به کمک دکمه‌های بالای بخش کدنویسی قادر به ذخیره‌سازی، بازگردانی، جستجو، جایگزینی و… در ویرایشگر کدها در وردپرس خواهید بود.
و همچنین دکمه‌های پایین کادر کدنویسی شامل:

 

 

Download Plugin: امکان دانلود تمام فایل‌ها و پوشه‌های افزونه انتخاب شده در قالب یک فایل زیپ را خواهید داشت.
Download File: ویژگی دانلود فایلی که در حال ویرایش و مشاهده آن هستید.
Create New Plugin: امکان ساخت و کدنویسی یک افزونه جدید.
Update File: بروزرسانی فایل جاری.

 

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

قابلیت های این افزونه‌، های‌لایت بودن کدها است که می‌توانید پارامترها و مقادیر را به راحتی تشخیص دهید و در صورت وارد کردن اطلاعات نادرست، به سرعت متوجه خطای خود شوید.
برای دسترسی به این امکان افزونه به مسیر نمایش> Theme Editor رجوع کنید.

 

 

به صفحه‌ای مشابه تصویر زیر هدایت خواهید شد. محیط‌های ویرایشگر افزونه و قالب شبیه هم هستند. از کشوی مقابل Select theme to edit قالب مورد نظر خود را انتخاب کنید. سپس بر روی دکمه select کلیک کنید. (این کشو شامل قالب‌هایی است که تاکنون به وردپرس معرفی کرده اید.)

 

نکته:

برای انتخاب قالبی به جز موارد موجود در کشو، از بخش upload files و به کمک دکمه browse قالب مورد نظر خود را انتخاب کرده و آن را آپلود کنید.
در نهایت تمامی فایل‌ها و پوشه‌های مرتبط با قالب انتخاب شده، برای شما لیست می‌شوند.
می‌توانید از بین آن ها فایل مورد نظر خود را جهت مشاهده و ویرایش انتخاب کنید و آن را در قسمت کدنویسی بررسی کنید.
در قسمت پایین ویرایشگر کدها در وردپرس، دکمه‌هایی جهت انجام عملیات تغییر و توسعه وجو دارد که به شرح زیر هستند:

 

 

Download Theme: امکان دانلود تمام فایل‌ها و پوشه‌های قالب انتخاب شده در قالب فایل زیپ.
Download File: امکان دانلود فایل جاری که در حال ویرایش و مشاهده آن هستید.
Create New Theme:  ویژگی ساخت و کدنویسی قالب جدید.
Update File: بروزرسانی فایل جاری.

 

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

 

قابلیت‌های این قسمت در قسمت تنطیمات افزونه در دسترس هستند و در صورت عدم تمایل به تغییر این بخش می‌توانید آن ها را غیر فعال کنید.
ترفند چپ چین کردن محیط کد نویسی افزونه
جهت چپ چین کردن محیط کدنویسی در همین افزونه، به مسیر افزونه ها> Plugin Editor بروید و از داخل کشوی افزونه‌ها، افزونه WP Editor را انتخاب کنید. فایل wpeditor.css را باز کنید و قطعه کد زیر را در آن وارد کنید:

Direction:ltr;

اکنون محیط کد نویسی چپ چین خواهد شد.

 

 

نکته: همیشه قبل از شروع هر تغییری از وردپرس خود یک نسخه پشتیبان تهیه کنید.

 

برای دانلود افزونه WP Editor کلیک کنید.

 

موفق و پیروز باشید.