برچسب: css

  • آموزش نحوه به روز رسانی مطالب با طراحی زیبا

    آموزش نحوه به روز رسانی مطالب با طراحی زیبا

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

    این کار اگر بخواهد به صورت دستی انجام شود کار بسیار سختی است مخصوصا اگر شما یک سایتی شناخته شده با هزاران نرم افزار و …. باشید.

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

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

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

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

     

    کد 1

     

    توجه : کد بالا باید در فایل function .php قرار بگیرد.

     

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

     

    کد 2

     

     

    مرحله بعد قرار دادن کد برای نمایش در سایت و قالب شماست. کد زیر را در هرجای قالب که قصد نمایش آن را دارید وارد کنید.

     

    کد 3

     

  • آموزش نحوه  نمایش اطلاعات متای نوشته ها ( meta data )

    آموزش نحوه نمایش اطلاعات متای نوشته ها ( meta data )

    meta data 

    آیا تاکنون به این فکر افتاده اید که داده متای نوشته های خود را برای بازدیدکنندگان سایت به نمایش بگذارید؟

    همانطور که می دانید داده های متا شامل : نویسنده ، دسته بندی ها ، تگ ها و …. هستند .

    اگر مایل هستید تا این موارد برای مطالب شما نمایش داده شود و آمار بازدید از مطالب و نوشته های خود را بالا ببرید با ما همراه شوید ……..

    یکی دیگر از مزایای نمایش داده های متا ، علاوه بر افزایش بازدید ، حرفه ای کردن سایت شماست. به طوری که می تواند تاثیر مثبتی بر روی بازدیدکنندگان بگذارید.

    البته فراموش نکنید ، نمایش بیش از حد داده ها منجر به این خواهد شد که مطالب شما شلوغ شده و کمی گیج کننده خواهد شد .

    متا

    وردپرس یار قصد دارد ، مرحله به مرحله اضافه سازی داده ها را در کد css به شما آموزش دهد.

     

    1- نمایش آخرین آپدیت :

    کد زیر را وارد کنید :

     

     متا

    نتیجه :

     

    متا

    2- نمایش یا مخفی کردن نام نویسنده :

    کد زیر را وارد کنید :

    متا

     

    نتیجه :

     

    متا

    3- نمایش یا مخفی کردن دسته بندی ها :

    کد زیر را وارد کنید :

    متا

    نتیجه :

     

    متا

     

    همانطور که مشاهده کردید ، به بخشی از موارد اشاره کردیم ، برای دریافت کدهای بیشتر به سایت زیر مراجعه کنید.

     

    منبع : wpbeginner

  • آموزش طراحی پست هایی متفاوت و زیبا در وردپرس

    آموزش طراحی پست هایی متفاوت و زیبا در وردپرس

    طراحی پست هایی متفاوت و زیبا در وردپرس

     

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

    مطلبی که امروز قصد دارم برای شما آموزش دهم پیش نیازهایی مانند : CSS ، HTML  را دارد ( یعنی به کمی کد نویسی و فهم آنها نیاز است )

     

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

    ساختن و طراحی تم هم از این قضیه مستثنی نیست.

    هسته ی اصلی تم وردپرس کلاس  ()post_class می باشد که می توان تغییرات را در همین کلاس اضافه کرد. برای فهم این مطلب می توان در مرورگر خود و با ابزار inspect  کلاس ذکر شده را مشاهده کرد. 

     

    استایل جدید ..

     

     

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

    post-id.

    post.

    attachment.

    sticky.

    hentry.

    category-ID.

    category-name.

    tag-name.

    {format-{format-name.

    {type-{post-type-name.

    has-post-thumbnail.

    post-password-required.

    post-password-protected.

     

     

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

    حال اگر مایل هستید پست خود را با شیوه ای متفاوت نمایش دهید از کلاس post-id استفاده کنید و ایدی مطلب خود را وارد کنید .

    استایل جدید.....

    به مثالی دیگر توجه کنید :

    با استفاده از تکنیک زیر می توانید استایل تمامی پست های خود را تغییر دهید.                                                    

    {}category-news.

    استایل جدید.....

    توجه کنید که post class  در تگ <article>  وجود دارد.

    برای یافتن این کلاس به فایل single.php  یا content templates file مراجعه کنید.

     

    استایل جدید......

    همانطور که می بینید پست مورد نظر ( longform ) در post class  وارد شده است.

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

    به کد زیر دقت کنید.

     

     

    استایل.......

     

    حال اگر می خواهید نام نویسنده را در استایل هایی که ساخته اید درج کنید و آنها را در کلاس مورد نظر ( طبق شکل زیر ) وارد کنید .

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

    استایل جدید........

    برای مثال در کد زیر می بینید که   peter .  در پست ها نمایش داده خواهد شد.

    کد زیر خروجی تصویر قبل می باشد.

    استایل جدید........

    برای تغییرات در استایل پست از کد زیر استفاده کنید.

    استایل ....

    منبع : wpbeginner