آموزش وردپرس – ویرایش پوسته ها – درس اول

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

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

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

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

برای آن دسته از تازه کارانی که تمایلی به یادگیری زبان css ندارند راه دیگری نیز برای سفارشی سازی قالبشان وجود دارد و آن استفاده از پلاگینهای پولی یا رایگان است. ما در این مقاله می خواهیم با کمک پلاگین Yellow Pencil که یک پلاگین رایگان است یک قالب وردپرس را انتخاب کرده و مقداری آن را ویرایش کنیم. گفتنی است پلاگین فوق الذکر دارای قابلیتهای بی نهایت زیادی است که برخی از این امکانات فقط در نسخه حرفه ای یا همان پولی اش ارائه می شود. بنابراین اگر می خواهید به تمامی امکاناتش دسترسی پیدا کنید می بایست از سایت تم فارست اقدام به خرید آن نمایید. البته ما در این مقاله به شما روشی را آموزش خواهیم داد که تا حد امکان به این کار نیازی نداشته باشید.

برای شروع به کار ابتدا از منوی سمت راست وردپرس موس را روی “افزونه ها” نگه دارید تا زیر منوهایش نمایان شود و سپس روی افزودن کلیک کنید.

در صفحه ای که باز می شود در باکس جستجو نام “yellow pencil” را نوشته و اینتر را بفشارید. نرم افزاری با آیکون زرد رنگ به این نام پدیدار می شود “Visual CSS Style Editor”. حالا روی “هم اکنون نصب کن” کلیک کنید تا مرحله نصب کردن آغازش شود.

در نهایت روی “فعال کردن افزونه” کلیک کنید تا پلاگین فعال شود.

اکنون به منوی سمت راست وردپرس، دکمه “yellow pencil” اضافه شده است. حالا اگر صفحه اصلی سایت را باز کنید، می بینید که بالای سایت و زیر منوهای مرورگر ما یعنی گوگل کروم، اسم پلاگین اضافه شده است. اگر موس را روی آن نگه دارید زیر منوهای آن نمایش داده می شوند.

زیر منوی “Global Customize” اگر انتخاب شود، هر ویرایشی که روی صفحه انجام دهید در تمام سایت و در تمام صفحات سایت اعمال خواهد شد. با انتخاب گزینه “Edit home Page only” تغییراتتان فقط بر روی صفحه ای که در حال کار کردن روی آن هستید اعمال خواهد شد.

وقتی روی یکی از این دو کلیک می کنید باکس پلاگین به این شکل، به نمایش در خواهد آمد. بسته به قالب و همچنین صفحاتی که در سایت ساخته اید ممکن است باکس پلاگین شما با تصویر زیر تفاوت داشته باشد. اگر از قسمت “Global Customize” در تصویر زیر روی “Category Page” کلیک کنید می توانید صفحه دسته بندی های سایت خود را ویرایش نمایید. همانطور که می بینید فعلا بخش “Home” یا همان صفحه اصلی فعال است.
از بخش “Customize One Page” می توانید یک برگه دلخواه را انتخاب نموده و شروع به ویرایش آن نمایید.
از بخش “Customize TEMPLATES” می توانید ظاهر کل یک بخش از سایت خود را ویرایش نمایید. بخشهایی مثل صفحه جستجو، صفحه ۴۰۴، صفحه دسته بندی ها، نویسنده ها، مطالب و برگه ها.

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

با انتخاب عنصر متنی در صفحه سایت و کلیک بر روی دکمه “Text” می توانید آن فونت و نوشته را ویرایش گرافیکی کنید.
با استفاده از گزینه شماره ۲ یعنی “Background” پس زمینه یا به اصطلاح بک گراند عنصر را می توانید تغییر داده و به رنگ یا الگوی مورد نظر خودتان در بیاورید.
با کمک گزینه ۳ “Margin” می توانید لبه خارجی عنصر را، از عناصر مجاور در جهت های بالا، پایین، راست و چپ فاصله دهید و به این طریق عنصر را در سایت جا به جا کنید.
گزینه ۴ یعنی “Padding” عناصر داخل عنصر را با لبه داخلی آن فاصله می دهد. نوعی حاشیه و فاصله داخلی در اجزای عنصر ایجاد می کند.
گزینه ۵ “Border” دور عنصر شما، کادری می کشد و شما با کمک آن می توانید رنگ این کادر و نحوه نمایشش را تغییر دهید.
گزینه ۶ یعنی “Border Radius” گوشه های دور کادر را به شکل مدور در می آورد. میزان دوار بودن کادر را می توانید از این طریق افزایش یا کاهش دهید.
با استفاده از گزینه ۷ “Position” می توانید موقعیت قرار گیری عنصر را نسبت به لبه های اصلی سایت تغییر دهید. در حالت margin شما فقط می توانستید موقعیت عنصر را نسبت به عناصر مجاور آن تغییر دهید اما با استفاده از position موقعیتش را بدون در نظر گرفتن موقعیت عناصر مجاور تغییر می دهید.

با استفاده از گزینه شما ۸ “Size” ابعاد عنصر را کاهش یا افزایش می دهید.
با استفاده از “Animation” به عنصر خود استایل متحرک می دهید.
با استفاده از گزینه ۱۰ “List” نوع نمایش فهرستی از عناصر را در قالب لیست تنظیم می کنید و نحوه نمایش این لیست را می توانید به روشهای مختلفی نظیر لیست عددی، لیست با کاراکتر دایره، کاراکتر مربع و غیره ویرایش نمایید.
گزینه بعدی یعنی “Box Shadow” به باکسی که عنصر در داخل آن قرار دارد، سایه می دهد و آن را به وسیله سایه، از محیط اطراف متمایز می کند.
با استفاده از گزینه ۱۲ یعنی “Extra” به تنظیمات بیشتری از قبیل میزان شفافیت، شناور شدن به سمت راست یا چپ، نمایش یا عدم نمایش و غیره دسترسی خواهید داشت.
با استفاده از گزینه ۱۳ یعنی “Save” تنظیمات خود را می توانید ذخیره کنید.
با دکمه ۱۴ می توانید هر تغییری که انجام داده اید را برگردانید به حالت اولیه.
و با دکمه ۱۵ پیش نمایش آنلاینی از تغییرات خود در سایت مشاهده خواهید نمود.

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