به سایت هوشیار خوش آمدید
به سایت هوشیار خوش آمدید
به سایت هوشیار خوش آمدید
سایت هوشیار
  1. خانه
  2. طراحی سایت
  3. آموزش وردپرس
  4. آموزش تغییر شکل ظاهری قالب در وردپرس

آموزش تغییر شکل ظاهری قالب در وردپرس

آموزش تغییر شکل ظاهری قالب در وردپرس
آموزش تغییر شکل ظاهری قالب در وردپرس

در این آموزش تغییر شکل ظاهری قالب در وردپرس با کمک فایل style.css را به شما یاد خواهیم داد.

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

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

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

آموزش تغییر شکل ظاهری قالب در وردپرس

Inspect Element چیست؟

مرورگرهای مدرن مانند گوگل کروم یا فایرفاکس ابزاری ساختند که به توسعه دهندگان اجازه میدهد بصورت آنلاین عیب یابی داشته باشند. این ابزار تگ های html و CSS و کدهای javascript و نحوه اجرای کدها را نشان میدهد.
با استفاده از inspect element شما میتوانید کدهای html و css و javascript را برای هر صفحه وبی ویرایش کنید تا بصورت زنده تغییرات را مشاهده کنید. ( تنها روی کامپیوتر و مرورگر خود این تغییرات را میبینید)
برای صاحبان وب سایت ها ، این ابزار می تواند کمکی در جهت پیش نمایش طراحی ها بدون اینکه شخص دیگری به جز خود آنها تغییر را مشاهده کند باشد.
این ابزار از جهت دیگری نیز جذاب است زیرا می توانید عناصر صفحه را برای گرفتن اسکرین شات مطابق با سلیقه دلخواه خود تغییر دهید.

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

مثلا در تصویر زیر مشاهده می کنید که ما سرتیتر ویجت را برای ویرایش انتخاب کرده ایم که در سمت راست باید عبارت widget-title. را کپی کرده و در بخش ویرایشگر فایل style.css در هاست در قسمت جستجو وارد می کنیم.

آموزش تغییر شکل ظاهری قالب در وردپرس

حالا مثلا می خواهیم تغییرات زیر را روی کلاس widget-title. انجام دهیم.

} widget-title.

رنگ فونت سرتیتر ;color: #222
شکل نمایش در بلاک ;display: block
اندازه فونت ;font-size: 14px
درشت بودن فونت ; font-weight: bold
ارتفاع ;height: auto
فاصله تیتر از سمت چپ ;left: 6px
ارتفاع خط ;line-height: normal
{ فاصله تیتر از حاشیه داخلی ;padding: 15px

آموزش تغییر شکل ظاهری قالب در وردپرس

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

آموزش تغییر شکل ظاهری قالب در وردپرس

برای باز کردن و ویرایش فایل سی اس اس (CSS) قالب وردپرسی، وارد هاست خود شوید > وارد File Manager شوید> وارد پوشه ی Public_html شوید> وارد wp-content شوید > وارد themes شوید >وارد پوشه ی نام قالب فعال شوید(قالبی که هم اکنون روی سایت شما اجرا می شود) > حالا دنبال فایل style.css گشته و آن را انتخاب کرده و از منوی بالای هاست گزینه ی Edit را انتخاب نمایید.

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

حالا می توانید تغییرات اساسی خود را بر روی قالب خود انجام دهید.

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


لیست کد های پرکاربرد Css

Layout
Widthپهنا تگ
Heightارتفاء تگ
Max-widthحداکثر پهنا تگ
Max-heightحداکثر ارتفاء تگ
Min-widthحداقل پهنا تگ
Min-heightحداقل ارتفاء تگ
Marginفاصله بیرونی شی با دیگر اشیا
Margin-topفاصله بالایی شی
Margin-bottomفاصله پایینی شی
Margin-leftفاصله از سمت چپ شی
Margin-rightفاصله از سمت راست شی
Paddingفاصله داخلی شی با کادر دور همان شی
Padding-topفاصله داخلی شی از بالا
Padding-bottomفاصله داخلی شی از پایین
Padding-leftفاصله داخلی شی از سمت چپ
Padding-rightفاصله داخلی شی از سمت راست
Positionمحل قرار گیری شی در صفحه
Topمحل قرار گیری شی در صفحه از بالا
Bottomمحل قرار گیری شی در صفحه  از پایین
Leftمحل قرار گیری شی در صفحه از چپ
Rightمحل قرار گیری شی در صفحه از راست
Visibilityنمایش یا عدم نمایش یک شی
Opacityمیزان شفافیت یکشی
Floatردیف کردن شی از سمت راست یا چپ
Clearاز جریان دادن عناصر در کنار عنصری که شناور شده است جلوگیری کند
Overflow-xتعیین می کند که محتوایی که از مرزهای چپ و راست عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند
Overflow-yیین می کند که محتوایی که از مرزهای بالا و پایین عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند
Overflowتعیین می کند که محتوایی که از مرزهای عنصر خارج می شود, نمایش داده شود یا نه. و همچنین چگونگی نمایش را نیز تعیین می کند
z-indexبرای تعیین ترتیب عناصر زمانی که روی هم قرار می گیرند, استفاده می شود. یعنی مشخص می کند که عنصر, رو یا زیر عنصر یا عناصر دیگر قرار بگیرد
Displayنوع نمایش
Text
Colorرنگ متن
Font-familyنوع قلم
Font-styleمورب یا نرمال بودن متن
Font-variantنوشتن متن با حروف بزرگ در اندازه کوچک
Font-sizeاندازه قلم
Font-weightضخامت قلم
Text-alignچپ چین ، راست چین ، وسط چین بودن متن
Line-heightارتفاع خط
Text-decorationزیر خط ، بالا خط ، روی خط
Text-indentمیزان تورفتگی
Text-shadowسایه متن
Text-transformتبدیل متن به حروف کوچک و بزرگ
Letter-spaceتعیین فاصله حروف
Word-spacingتعیین فاصله کلمات
White-spaceفاصله کلمات
Vertical-alignموقعیت عممودی شی
Fontتمامی تنظیمات مربوط به قلم
@font-faceاختصاص دادن یک نام به یک فونت
Border
Border-collapseایجاد فاصله یا از بین بردن فاصله بین کادر دور ایشا
Border-spacingفاصله بین خطوط کادر دور
Border-colorرنگ کادر دور
Border-widthپهنای کادر دور
Border-styleنوع کادر دور
Border-radiusشعاع گوشه های کادر دور اشیا
Background
Background-colorرنگ پیس زمینه
Background-imageعکس پس زمینه
Background-positionمحل قرار گیری پس زمینه
Background-sizeاندازه پس زمینه
Background-clipبریدن تصویر پس زمینه
Background-repeatتکرار یا عدم تکرار عکس پس زمینه
Background-originقرار دادن تصویر پس زمینه در موقعیت خاص
Background-attachmentثابت یا متحرک بودن عکس پس زمینه
Box-shadowایجاد سایه
Box-directionمسیر نمایش باکس
Backgroundتمام ویژگی های پس زمینه
Others
List-style-positionمحل قرار گیری شکل یا شماره های لیست
List-style-imageتصویر به جای شکل در لیست
List-style-typeنوع شکل یا شماره های لیست
@keyframesایجاد انیمیشن
Animationتعریف ویژگی های انیمیشن یک شی
Animation-durationمدت اجرای انیمیشن
Animation-nameنام انیمیشن
Animation-delayبعد از چه تاخیری زمانی انیمیشن اجرا شود
Animation-timing-functionسرعت اجرا انیمیشن
Animation-directionمسیر حرکت انیمیشن
Animation-iteration-countتعداد اجرا انیمیشن
clipبرش در یک شی
Caption-sideمحل قرار گیری برچسب جدول
Column-gapبرای ایجاد فضای خالی بین دو ستون
Column-countتعداد ستون در یک شی
Column-rule-colorرنگ خط بین ستون ها
Column-ruleضخامت ، نوع خط و رنگ بین ستون ها
Column-rule-widthضخامت خط بین دو ستون
Column-rule-styleنوع خط بین ستون ها
Columnsتعداد ستون ها و پهنای ستون ها
Column-widthپهنای ستون ها
Cursorتغییر شکل اشاره گر ماوس
Word-warpشکستن خط و انتقال ان به خط بعدی
Outlineکادر بیرونی هر شی
Directionمسیر نوشتن متن
Outline-colorرنگ کادر بیرونی هر شی
Empty-cellsنمایش یا عدم نمایش سلول های خالی
Outline-widthضخامت کادر بیرونی
Outline-styleنوع کادر بیرونی
Transformتغییر شکل دادن شی
Table-layoutتعیین الگوریتم استفاده از جدول
Transition-propertyتغییر خصوصیت ها موقع انتقال
Transform-originتغییر شکل بر اساس نقطه خاص
Transition-timing-functionشتاب حرکت
Transition-durationمدت اجرای انتقال
Transition-delayمیزان تاخیر تا اجرای انتقال

امیدواریم از این مقاله نیز لذت برده باشید.


منبع: bytelearn – فروشگاه


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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست