آموزش کامل CSS – قسمت 14: دستور display

دستور display در css

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

دستور display نحوه نمایش المان ها را مشخص می کند.

مقدار inline block

همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع به المان‌هایی مثل <p> یا <div> اطلاق می‌شود. این المان‌ها هیچ چیز دیگری را در کنار خود جای نمی‌دهند. در جلسه قبل ما با استفاده از خاصیت شناور float المان ها در کنار یکدیگر قرار دادیم. امروز با استفاده از display و inline block تمامی المان ها را در یک سطر و کنار یکدیگر قرار می دهیم.

مقدار inline block المان ها را در یک خط کنار هم قرار می دهد. در مثال زیر 4 جعبه شناور را در کنار یکدیگر قرار می دهیم:

<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>
<div class="floating-box">جعبه‌های شناور</div>

css code

.floating-box {
    display: inline-block;
    width:  150px;
     height:  75px;
     margin:  10px;
     border:  3px solid #8AC007;
}

خروجی مثال به صورت زیر نمایش داده می شود:

سی اس اس 14

همان طور که مشاهده می کنید بعد از استفاده از دستور inline-block دیو های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند.

برای تمرین یک لیست بدون نظم unorderd list ایجاد کنید و  کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند.

راهنمایی: المان‌ لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور خاصی استفاده می‌کردیم.

قالب وردپرس maxshop مکس شاپ فارسی

قالب وردپرس maxshop فارسی

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

طرح بندی های صفحه اصلی

صفحات اصلی مکس شاپ

طرح بندی های هدر

طرح بندی هدر مکس شاپ

تست های سرعت مکس شاپ

تست سرعت مکس شاپ

ویژگی های کلیدی قالب

ویژگی های مکس شاپ

تنظیمات پیشرفته فارسی

تنظیمات فارسی مکس شاپ

ویژگی های دیگر قالب

  • طراحی کاملا ریسپانسیو
  • کارایی فوق العاده بالا
  • طرح های مختلف منو و مگا‌منو
  • سازگاری با ووکامرس فارسی
  • صفحه ساز ویژوال کامپوزر
  • نمایش سریع محصول به صورت پاپ‌آپ
  • سبد خرید کوچک با آجاکس
  • تایمر زمان معکوس برای محصولات
  • طرح های مختلف صفحات فروشگاه و محصولات
  • طرح های مختلف صفحات وبلاگ
  • افزونه های اضافی نصب شده
  • رولوشن اسلایدر
  • ووکامرس فارسی
  • افزونه میل چمپ
  • فایل های نصب دمو
  • لیست های علاقه مندی
  • بررسی و مقایسه محصولات
  • شورت کد های آماده
  • دارای 5 رنگ اصلی تم با امکان تغییر توسط بازدید کننده (توجه داشته باشید که مدیر از طریق تنظیمات قالب می تواند امکاناتی را در اختیار بازدیدکنندگان قرار دهد تا آنها بتوانند در طرح اصلی قالب روی سیستم خوشان تغییرات ظاهری در قالب سایت با سلیقه خود انجام بدهند. این تنظیمات در آیکون دستی که در سمت راست دموی سایت قرار دارد قابل دسترس است و گزینه های دیگری نیز می تواند داشته باشد.)
  • فونت های گوگل و فونت آیکون ها
  • فونت فارسی بی یکان نصب شده روی قالب
  • ساخته شده براساس HTML5, CSS3 & LESS
  • افزونه فرم تماس 7
  • قابلیت سفارشی سازی سی‌اس‌اس
  • قابلیت تنظیمات تایپوگرافی
  • مگا‌منو و منوی کرکره ای
  • پشتیبانی از منوهای مختلف در مکان های مختلف
  • سئوی بهینه برای موتور‌های جستجو
  • افزونه سئوی وردپرس با قابیلت تنظیم و سفارشی سازی
  • پشتیبانی از انواع مرورگرها
  • پشتیبانی و بروز رسانی رایگان

ارسال مطالب سایت به واتس‌آپ و تلگرام

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

ارسال مطالب وردپرس به تلگرام

افزونه Channeller – Telegram Channel Administrator یکی از بهترین و کاربردی ترین افزونه های وردپرس برای ارسال مطالب و پست ها به کانال ها و گروه های تلگرام است. تصویر زیر صفحه تنظیمات افزونه را نشان می دهد:

تنظیمات افزونه ارسال به تلگرام

در اولین فیلد یعنی Enter Your Telegram Bot شما باید کد مربوط به ربات تلگرام خود رو وارد کنید که ارتباط بین ربات و افزونه برقرار شود. همچنین در فیلد List Of channels باید نام کانال ها و گروه های که تمایل دارید مطالبتون منتشر بشه رو وارد کنید. سپس در انتهای صفحه باید تعیین کنید که بعد از ارسال مطالب برای شما پیغامی ارسال بشه یا نه.

بعد از نصب و انجام تنظیمات افزونه  به صفحه افزودن نوشته میرویم. در این بخش باکسی رو مشاهده می کنیم که جدید اضافه شده و به شکل زیر هست :

افزودن نوشته پلاگین تلگرام

گزینه های این بخش به شرح زیر می باشد:

Send To Channels : در این بخش میتونید تعیین کنید که مطالب شما به کدام یک از گروه ها و کانال هایی که قبلا وارد کرده اید ارسال بشه. (چندین گروه و کانال رو میتونید وارد کنید)

Link Type : در این قسمت میتونید مشخص کنید که پیوند نوشته شمابه طور کامل باشه یا از پیوند کوتاه استفاده بشه.

Massage Text : در قسمت Massage Text شما اگر گزینه پیش فرض رو انتخاب کنید نوشته شما به طور کامل ارسال میشه. اما اگر بخواهید یک متن اختصاصی همراه با نوشته ارسال بشه باید از Custom Textt استفاده کنید.

Custom Text : این گزینه به شما اجازه میده که یک نوشته اختصاصی رو وارد کنید که همراه با نوشته وردپرس تون ارسال بشه. توجه داشته باشید که کاراکتر های مجاز در این فیلد حداکثر ۳۰۰۰۰ هست.

Image : این قسمت مخصوص انتخاب تصویر نوشته شماست. گر بر روی گزینه پیش فرض کلیک کنید تصویر شاخص نوشته وردپرس شما ارسال میشه و اگر مانند تصویر بر روی Custom Image کلیک کنید میتونید یک تصویر جداگانه به صورت اختصاصی برای نوشته خودتون توی تلگرام مشخص کنید.

بعد از انجام این تنظیمات و زدن گزینه ارسال نوشته وردپرسی شما به تلگرام ارسال می‌شود.

ارسال مطالب وردپرس به واتس‌آپ

در ابتدا توجه داشته باشید که افزونه Share Post On WhatsApp جهت اشتراک خودکار مطالب در واتس‌آپ نیست، بلکه دکمه اشتراک گذاری مطالب در واتس آپ رو به انتهای نوشته های وردپرس‌ اضافه می کند.

پس از نصب و فعال سازی افزونه مشابه تصویر زیر به مسیر تنظیمات> Share Post On WhatsApp مراجعه کنید و گزینه enable رو فعال نمایید:

تنظیمات افزونه ارسال به واتس‌آپ

پس از فعال سازی این گزینه دکمه اشتراک گذاری مطالب در شبکه‌های اجتماعی به صورت زیر نمایش داده خواهد شد:

تست ارسال به واتس‌آپ

ارسال مطالب وردپرس به واتس‌آپ بدون افزونه

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

whatsapp://send?text=<?php the_permalink(); ?>

شما می‌توانید با کد html به سادگی لینک بالا رو در یک متن قرار دهید. بطور مثال :

<a href="whatsapp://send?text=<?php the_permalink(); ?>">ارسال در واتس آپ </a>

حال اگر کد فوق را به فایل Single.php قالب سایتتون بعد از the_content اضافه نمایید، متن ارسال در واتس‌آپ بعد از محتوای نوشته وردپرس شما نمایش داده می شود. که کاربر با کلیک روی این لینک وارد واتس‌آپ شده و باید انتخاب کند که این لینک را برای چه فرد یا گروهی ارسال کند.

آموزش کامل PHP – قسمت 23: حلقه foreach و خواندن فایل ها

در ادامه جلسه قبل، کار با فایل ها در php را ادامه می دهیم و ابتدا به معرفی حلقه foreach می پردازیم. سپس به خواندن فایل ها می رسیم.

حلقه foreach

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

foreach (array as $value){

    //code to run

}

//or

foreach (array as $key => $value){

    //code to run

}

در روش اول، مقدار هر عضو از آرایه مورد نظر در هر بار اجرای حلقه در متغیری به نام value$ قرار می‌گیرد و در هر بار اجرای حلقه می‌توان یک عضو ار آرایه را به عنوان مثال چاپ کرد یا عملیات دلخواه را روی آن انجام داد. اما در روش دوم، کلید هر عضو از آرایه را به key$ تغییر داده‌ایم و سپس مقدار هر عضو آرایه را در متغیر value$ قرار می‌دهیم.

برای درک بهتر به مثال زیر توجه کنید. در این مثال یک آرایه به نام names داریم که شامل چند نام است. قصد داریم با استفاده از حلقه foreach تک تک نام‌های موجود در این آرایه را چاپ کنیم:

<?php

$AllNames = Array("mojtaba", "hossein", "milad", "hamid", "masoud","mehdi");

foreach ($AllNames as $name)

{

    echo $name . "<br>";

}

?>

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

خواندن فایل‌ها

با استفاده از تابع ()file می‌توانیم فایل مورد نظرمان را بخوانیم. این تابع فایل مورد نظر را در قالب یک آرایه برای ما آماده می‌کند و هر المان از فایل را به عنوان یک عضو از آرایه در نظر می‌گیرد.

درادامه  جلسه قبل، فایل names.txt را در نظر بگیرید، اکنون باید شامل چند نام باشد. در واقع در هر خط از این فایل یک نام نوشته شده است. حال در پوشه files که در پوشه htdocs یا www ایجاد کرده بودید، یک فایل جدید به نام read.php ایجاد کنید. سپس کد زیر را در این فایل قرار دهید:

<?php

$read = file("names.txt");

foreach($read as $name)

{

    echo $name . " - "; 

}

?>

کد بالا تمام نام‌های موجود در فایل names.txt را که در کنار فایل read.php وجود دارد خوانده و آن‌ها را با علامت – از هم جدا می‌کند. از آنجا که در اینجا محتویات فایل در یک آرایه قرار داده شده از foreach استفاده کرده‌ایم، همانطور که گفتیم این حلقه فقط برای آرایه‌ها بکار گرفته می‌شود.

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

$read = file("names.txt");

$count = count($count);

$i = 1;

foreach ($read as $line)

{
    echo $line;

        if($i < $count){

            echo " - ";

        }

        $i++;

}

?>

در کد بالا ابتدا با تابع count اقدام به شمارش تعداد اعضای آرایه read$ کرده‌ایم. همانطور که می‌دانید آرایه یاد شده در واقع دربرگیرنده محتویات فایل names.txt است. سپس با یک حلقه for تمامی اعضای این آرایه را چاپ می‌کنیم و در هر بار اجرای حلقه یک واحد به متغیر i$ اضافه می‌کنیم. این متغیر تعداد خطوط را نگهداری می‌کند. در شرط حلقه بررسی می‌کنیم که آیا به آخرین خط فایل یعنی آخرین عضو آرایه read رسیده‌ایم یا خیر، اگر همچنان به انتهای فایل نرسیده باشیم کاراکتر – در ادامه نام‌ چاپ می‌شود و اگر به آخرین خط فایل رسیده باشیم از آنجا که در حلقه چنین شرطی را نوشته‌ایم، پس شرط برای خط آخر برقرار نیست و کاراکتر – پس از نام چاپ نمی‌شود.

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