123 وردپرس

جستجو در بین مطالب سایت 123 وردپرس

400 Bad Request
400 Bad Request
Please forward this error screen to 109.203.124.146's WebMaster.

Your browser sent a request that this server could not understand:

  • (none)/checks.txt (port 80)

شیوه نامه ی وردپرس CSS در قالب های وردپرسی

  • ۲۱ - ۰۶ - ۱۳۹۵
  • 0 نظر
  • 129 بازدید
  • wordpress-css-123wp-ir

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

    Css مخفف Cascading Style Sheets می باشد که در مبحث طراحی سایت ها به شما اجازه می دهد اطلاعاتی نظیر رنگ، لایه ها، فونت و… را جدا از ساختار اچ تی ام ال در قالب ارائه دهید. همچنین کار با آن بر سرعت و ساده تر شدن بروز رسانی ها موثر است.

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

    وردپرس Css

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

    فایل های قالب

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

    برچسب های قالب

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

    شیوه نامه

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

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

    چندین کلاس در وردپرس Css برای جهت تصاویر و عناصر بلوک ها موجود است که در تمامی قالب های وردپرسی رعایت می شود مانند کلاس های aligncenter، alignleft، alignright بعلاوه کلاس alignnone نیز به آن ها اضافه شده است. بنابراین شما برای جهت دهی ها حتما به این موارد نیازمند هستید. معمولا کلاس هایی که در قالب ها به صورت وردپرس Css استفاده می شود یکی هستند! به همین علت ما قطعه کد اصلی وردپرس Css را به صورت یک نمونه ی کلی در زیر آورده ایم:

    /* =WordPress Core
    -------------------------------------------------------------- */
    .alignnone {
        margin: 5px 20px 20px 0;
    }
     
    .aligncenter,
    div.aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }
     
    .alignright {
        float:right;
        margin: 5px 0 20px 20px;
    }
     
    .alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }
     
    a img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
    }
     
    a img.alignnone {
        margin: 5px 20px 20px 0;
    }
     
    a img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }
     
    a img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
     
    .wp-caption {
        background: #fff;
        border: 1px solid #f0f0f0;
        max-width: 96%; /* Image does not overflow the content area */
        padding: 5px 3px 10px;
        text-align: center;
    }
     
    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }
     
    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }
     
    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }
     
    .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }
     
    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }
     
    /* Text meant only for screen readers. */
    .screen-reader-text {
        clip: rect(1px, 1px, 1px, 1px);
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
    }
     
    .screen-reader-text:focus {
        background-color: #f1f1f1;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        clip: auto !important;
        color: #21759b;
        display: block;
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: bold;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000; /* Above WP toolbar. */
    }

    هر قالبی باید از ساختار بالا در وردپرس Css یا همان Style.css خود استفاده کند تا بتواند تصاویر و توضیحات آن ها را نمایش دهد.

    جمع بندی!

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

  • راهی آسان برای ارتباط ما با شما عزیزان :)
  • کانال تلگرام 123وردپرس
    نظرات کاربران

    ارسال دیدگاه

    *

    *

    *

    speed

    موفقیت

    به آسانی به دست می آید.

    شما هم می توانید ...
    starup

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

    در ادامه بخوانید
    طراحی سایتقالب وردپرس

    وبسایت های بی شماری از قالب های ما استفاده می کنند.