آموزش کامل وردپرس – قسمت سوم: ادامه پنل مدیریت

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

دسته ها و برچسب ها

دسته ها و برچسب ها

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

توضیح دقیق تر بخش دسته ها

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

دسته بندی

همان طور که در تصویر مشاهده می کنید این بخش شامل 4 قسمت می باشد:

  1. نام دسته
  2. نامک: نامک نام لاتین مطلب شما رو مشخص می کند برای مثال شما مطلبی در رابطه با گوگل می نویسید و عنوان آن ‘اهداف گوگل’ است، اگر برایش نامک تعیین نکنید لینک شما به صورت زیر می شود:

    site.com/1394/09/03/%20%70%70%80%30

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

     site.com/1394/09/03/google_plans

    که هم برای رتبه سایت تان در موتورهای جستجو مفید است و هم برای کاربران راحت تر است.

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

تصویر شاخص

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

تصویر شاخص

 حال به بررسی بخش های دیگر می پردازیم:

گزینه فرستادن بازتاب 

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

نویسنده

در این بخش نام نویسنده مطلب را انتخاب می کنیم.

زمینه های دلخواه

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

رسانه ها

رسانه

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

برگه ها

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

عنوان، محتوا و نظرات

ادیتور یا ویرایشگر متن وردپرس

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

ویرایشگر متن

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

توضیح ویرایشگر

حالا می توانید اولین مطلب سایت خود را منتشر کنید.

پایان قسمت سوم

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

آموزش کامل PHP – قسمت سوم: عملگرها

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

عملگرها

عملگرها در واقع عملیات روی داده ها را انجام می دهند. برای مثال جمع یک عملگر است که کار آن عملیات جمع را روی دو عدد است.

عملگرهای اصلی

عملگرهای اصلی همان عملیات اصلی در ریاضیات هستند. عملگرهای اصلی در پی اچ پی شامل جمع (+)، تفریق (-)، ضرب (-)، تقسیم (/) و باقیمانده (%) می باشند. به کدهای زیر توجه کنید توضیحات به صورت کامنت به کدها اضافه شده است.

<?php

$num1 = 3;

$num2 = 4;

//addition;

echo $num1 + $num2;   //this will print 7

//subtraction

echo $num2 – $num1;   //this will print 1

//multipliction

echo $num1 * $num2;   //this will print 12

//divition

echo $num4 / $num1;   //this will print 1 (تقسیم صحیح)

?>

در برنامه فوق 4 عمل اصلی را با php انجام دادیم. عملگر بعدی باقیمانده است، این عملگر برای گرفتن باقیمانده تقسیم به کار می رود. به مثال زیر توجه کنید.

<?php>

//module

$num1 = 9;

$num2 = 2;

echo $num1 / $num2;   //this will print 1

?>

عملگرهای افزایشی و کاهشی

از این عملگرها برای افزایش و کاهش یک واحدی استفاده می شوند و با علامت ++ و __ نشان داده می شوند. به عنوان مثال ++x& معادل 1 + x$ است. درمورد — نیز به همین صورت است.

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

اگر می‌خواهید ابتدا به مقدار کنونی متغییر دسترسی یافته و سپس عملیات افزایش یا کاهش را انجام دهید باید از کدی مانند زیر استفاده کنید و عملگرهای مورد بحث را پیش از نام متغییر بکار بگیرید:

<?php

&x = 1;

echo ++$x;  //ابتدا یک واحد به متغییر افزوده شده و سپس در خروجی چاپ می شود، عدد 2 در خروجی چاپ می شود

echo “<br>”;

echo $x;  //عدد 2 در خروجی چاپ می شود

?>

عملگرهای انتساب

این نوع عملگرها برای انتساب یک مقدار به متغییرها استفاده می شود. یکی از این عملگرها = است که پیشتر در مثال ها از آن استفاده کردیم. از دیگر عملگرهای انتساب به =+ و =- می توان اشاره کرد که کارکرد آن ها به صورت زیر است.

<?php

$num1 = 90;

echo $num1 += 50;  //this is same $num1 = $num1 + 50

echo $num1;  //this will print 140

?>

در کد بالا ابتدا مقدار 90 را به متغیر num1 اختصاص دادیم. سپس با استفاده از عملگر اختصاص دادن =+ مقدار 50 را به متغیر num1 اضافه و نتیجه را مجددا در خود متغیر ذخیره کردیم. در نهایت با دستور echo مقدار نهایی num1 را در مرورگر نمایش دادیم. عملگرهای انتساب به شرح زیر هستند:

 
عملگر کارکرد توضیح
$x += $y $x = $x + $y افزایشی
$x -= $y $x = $x – $y کاهشی
$x *= $y $x = $x * $y ضرب
$x /= $y $x = $x / $y تقسیم
$x %= $y $x = $x % $y باقی مانده

عملگرهای مقایسه ای

از این نوع عملگرها برای مقایسه دو داده استفاده می‌شود. این عملگرها خروجی دو حالته دارند بدین معنا که پس از انجام مقایسه یا مقدار صحیح (true) یا مقدار غلط (false) را باز می‌گردانند. در جدول زیر می‌توانید این عملگرها و کاربرد آن‌ها را ببینید:

عملگر نام مثال نتیجه
== برابری $x == $y اگر مقدار x و y برابر باشد true را برمی‌گرداند
=== یکسان $x === $y اگر مقدار x و y برابر و نوع آن‌ها نیز یکی باشد true را برمی‌گرداند
=! عدم برابری $x != $y اگر مقدار x و y برابر نباشد true را برمی‌گرداند
<> عدم برابری $x <> $y اگر مقدار x و y برابر نباشد true را برمی‌گرداند
==! عدم یکسان بودن $x !== $y اگر مقدار x و y برابر نباشد و نوع آن‌ها نیز یکی نباشد true را برمی‌گرداند

پایان قسمت سوم

آموزش کامل CSS – قسمت دوم: قوانین نوشتن

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

قوانین کلی نوشتن CSS

نوشتن در سی اس اس 3 مرحله دارد:

  1. نام گذاری المان های html
  2. صدا زدن المان های نام گذاری شده در فایل css
  3. حال کافیست تغییراتی که می خواهید در جلوی نام المان ها بنویسید

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

قدم اول: المان های اچ تی ام الی که قصد تغییر آن ها را داریم انتخاب می کنیم. ما در این جا قصد تغییر متن ها را داریم و می دانیم که تگ ها در html با تگ p نوشته می شوند، پس p را به عنوان نام این المان می نویسیم.

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

قدم سوم: بعد از کروشه آن چیزی که قصد داریم در این المان تغییر کند را می نویسیم. مثلا برای تغییر رنگ المان کلمه color به معنای رنگ را نوشته جلوی آن : قرار می دهیم.

قدم چهارم: در جلوی دو نقطه تغییری که قصد داریم اعمال شود را می نویسیم، مثلا نام یا کد رنگی که در نظر داریم را می نویسیم و سیمی کولن می گذاریم. در نهایت کروشه را می بندیم.

p {

color: red;

}

حال تمامی تگ های پاراگراف صفحه به رنگ قرمز در می آیند.

توجه داشته باشید که در انتهای هر دستور css در کروشه باید سیمی کولن قرار دهیم و هر دستور را در یک سطر می نویسیم تا خوانایی کدها بیشتر می شود.

فرض کنید می خواهیم بعد از قرمز کردن رنگ متن فونت آن را نیز به تاهما تغییر دهیم، دستور زیر را اضافه می کنیم.

p {

color: red;

font-family: tahoma;

}

در قسمت بعد با نحوه‌ی انتخاب و نام‌گذاری المان‌های اچ‌تی‌ام‌ال بیشتر آشنا خواهیم شد.

آموزش کامل HTML – قسمت دوم: تگ پاراگراف

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

تگ پاراگراف

برای نوشتن متن در صفحات وب از این تگ استفاده می کنیم. تگ پاراگراف با <p> شروع می شود و به <p/> ختم می شود و  متن مورد نظر بین آن ها قرار می گیرد. روش استفاده از آن به صورت زیر است.

<p> متن یا جمله مورد نظر </p>

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

<p> سلام </p>

<p> آموزش کامل اچ تی ام ال با پردیس وردپرس </p>

خروجی آن به صورت زیر در مرورگر نمایش داده می شود.

سلام

آموزش کامل اچ تی ام ال با پردیس وردپرس

اگر به تگ کد فوق دقت کنید متوجه می شوید که برای نشان دادن نوشته در دو خط ما از دو تگ پارگراف استفاده کردیم، علت این امر این است تگ <p> متن را بدون فاصله اضافی در نظر می گیرد و اگر هر دو خط را در یک تگ بنویسیم کل متن در یک خط و پشت سر هم نمایش داده می شود. برای رفع این مشکل ما از دو تگ <p> استفاده کردیم. (توجه داشته باشید که نوشتن تگ دوم در خط بعدی الزامی نیست و بصورت خودکار متن تگ دوم در خط بعدی نمایش داده می شود)

تگ <pre>

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

<pre> متن مورد نظر </pre>

تگ <br>

از این تگ برای انتقال متن به خط بعدی استفاده می شود، در واقع کاربرد کلید اینتر را دارد. از این تگ می‌توان برای اینتر زدن در متن یا به طور کلی ایجاد یک خط جدید در هر المان اچ‌تی‌ام‌ال استفاده نمود. تگ <br> به همین شکل و بدون تگ پایانی استفاده می شود. مثال:

<p> متن خط اول <br> متن خط دوم </p>

خروجی:

متن خط اول

متن خط دوم

پایان قسمت دوم آموزش html.

آموزش کامل وردپرس – قسمت دوم: پنل مدیریت

معرفی پنل مدیریت

همان طور که در قسمت اول آموزش کامل وردپرس گفتیم با آدرس http://localhost/test/wp-admin وارد پنل مدیریت وردپرس می شویم. برای ورود نام کاربری و رمز عبوری که در هنگام نصب وردپرس تعریف کردید، وارد کنید. تصویری مانند زیر خواهید دید که همان پنل مدیریت وردپرس شماست.

پنل مدیریت وردپرس

همانطور که مشاهده می کنید در گوشه بالا سمت راست نامی که برای وب سایت در نظر گرفتید نوشته شده که اگر موس را روی آن ببرید گزینه نمایش سایت پدیدار می شود و می توانید با کلیک بر روی آن پیش نمایش اولیه وب سایت تان را مشاهده کنید. روش دیگر مشاهده سایت، تایپ کردن آدرس http://localhost/test در مرورگرتان است.

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

نمایش پوسته ها

پوسته یا قالب پیش فرض 2016 روی وردپرس نصب است که با نمایش سایت قابل مشاهده است. شما می توانید از طریق منوی سمت راست گزینه نمایش و سپس پوسته ها، پوسته ها را مشاهده کنید و یا در صورت تمایل عوض کنید. به صورت پیش فرض 3 پوسته وجود دارد که با رفتن موس روی هر کدام گزینه فعال کردن نمایش داده می شود.

انتخاب پوسته

افزودن نوشته

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

افزودن نوشته

انتشار نوشته

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

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

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

وضعیت

وضعیت:

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

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

نمایانی:

این قسمت برای مشخص کردن نوع نمایانی یا نمایش مطلب در وب سایت است.

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

انتشار فوری:

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

ساختار نوشته

ساختار نوشته

همه قالب ها از ساختار پشتیبانی نمیکنند. ساختار نوشته ها یکی از قابلیت‌های وردپرس است که از نسخه ۳٫۱ تاکنون در بخش کناری صفحات ارسال مطلب در پیشخوان وردپرس قرار گرفته است. همانطور که از نامش پیداست مشخص می‌کند که یک نوشته وردپرسی (و یا هر نوع نوشته دیگر که از این قابلیت پشتیبانی کند) چه محتوایی در بر دارد.

ساختار استاندارد: 

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

ساختار حاشیه: 

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

ساختار تصویر: 

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

ساختار گالری تصاویر: 

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

ساختار پیوند: 

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

ساختار گفتاورد: 

این ساختار برای درج نوشته‌هایی به کار می‌روند که از فردی دیگر نقل‌قول شده و قصد دارید آن را عینا در نوشته‌تان درج کنید. به طور مثال اگر قصد دارید در وبلاگ شخصی‌تان سخنی از یک دانشمند بزرگ درج کنید استفاده از این ساختار (و همینطور گزینه نقل‌قول در ویرایشگر هنگام ارسال نوشته) بهترین انتخاب ممکن است.

ساختار وضعیت: 

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

ساختار فایل تصویری: 

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

ساختار فایل صوتی: 

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

ساختار گپ: 

این ساختار نیز مشخصا برای درج نوشته‌هایی هستند که حاوی یک مکالمه بین دو شخص است.

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

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

سوالات خود در مورد این قسمت را در بخش نظرات مطرح کنید.

آموزش کامل PHP – قسمت دوم: توضیح و متغیرها

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

دستور echo

دستور اکو برای چاپ خروجی در php به کار می رود، یعنی خروجی این دستور در مروگر کاربر نمایش داده می شود. یک روش استفاده از این دستور این است که اطلاعاتی که میخواهیم کاربر ببیند را در داخل دابل کوتیشن (“) یا تک گوتیشن (‘) در مقابل این دستور می نویسیم و یک سیمی کولن (;) بعد از آن قرار می دهیم. در php در انتهای هر دستور سیمی کولن قرار می دهیم. مثال:

<?php

echo “قسمت دوم آموزش پی اچ پی در پردیس وردپرس “;

?>

آنچه که بین دابل کوتیشن قرار گرفته در مرورگر نمایش داده می شود. علاوه بر متن می توانیم کدهای html را نیز در دستور echo به کار ببریم.

<?php

echo “قسمت دوم آموزش پی اچ پی در پردیس وردپرس <br>خط بعدی<b>متن ضخیم</b><i>متن ایتالیک</i>”;

?>

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

متغیرها

مفهوم متغیر در برنامه نویسی در واقع فضاهایی از حافظه است که برای ذخیره کردن داده ها در برنامه از آن استفاده می کنیم. متغیر را می توانیم مانند یک ظرف خالی در نظر بگیریم که در php هر نوع داده ای را در خود جای می دهد. به این معنی که بر خلاف دیگر زبان های برنامه نویسی در این جا لازم نیست برای هر نوع داده متغیری جداگانه در نظر بگیریم. یک متغیر تعریف می کنیم و هر نوع داده ای که می خواهیم در آن ذخیره می کنیم.

حال به چگونگی تعریف و استفاده از متغیرها می پردازیم. برای متعریف متغیرها باید ابتدا علامت $ را نوشته و پس از آن نام متغیر مورد نظر را بنویسید. دقت کنید در نام گذاری متغیرها حروف بزرگ و کوچک با یکدیگر فرق دارند، یعنی متغیری با نام var$ با متغیری با نام Var$ تفاوت دارد و پی‌اچ‌پی در واقع آن‌ها را دو متغیر جدا از هم می‌داند.

<?php

// متغیر رشته ای

$var1 = “pardiswp”;

// متغیر عدد صحیح

$var2 = 123;

// متغیر اعشاری

$var3 = 1.222;

// متغیر صحیح یا غلط

$var4 = true;

?>

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

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

چاپ متغیرها

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

<?php

// خط زیر یک متغیر رشته ای است

$var = “عبارت مورد نظر”;

// خط زیر یک متغیر عددی است

$newVar = 123;

// خط زیر یک متغیر از نوع صحیح یا غلط است

$anotherVar = true;

echo $var;

// خط زیر کد اچ تی ام الی است که باعث رفتن به خط جدید در مرورگر می شود

echo “<br>”;

// کد زیر مقدار متغیر را در مرورگر نمایش می‌دهد

echo $newVar;

echo “<br>”;

echo $anotherVar;

?>

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

<?php

//  خط زیر یک متغیر رشته ای است

$var = “عبارت موجود در متغیر اول”;

// خط زیر یک متغیر عددی است

$newVar = 123;

// خط زیر یک متغیر از نوع صحیح یا غلط است

$anotherVar = true;

// کد زیر باعث چاپ متن و متغیر در کنار یکدیگر خواهد شد

echo “مقدار متغیر اول: $var”;

echo “<br>”;

echo “مقدار متغییر دوم: $newVar مقدار متغیر سوم: $anotherVar”;

?>

کد را اجرا کنید خواهید دید که به جای نام متغیر مقدار آن در مرورگر نمایش داده می شود.

پایان قسمت دوم

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

آموزش کامل CSS – قسمت اول: آشنایی و روش استفاده

مقدمه

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

سی اس اس در کنار اچ تی ام ال هسته فناوری ساخت صفحات وب است. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. در حال حاضر بیشترین استفاده از این زبان برای استایل دادن به صفحات وب است.

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

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

روش های استفاده از css در صفحات html

روش اول به صورت خطی

در این روش از مشخصه های css در تگ های html استفاده می کنیم. این روش به دلیل استفاده مستقیم و در هم کدها فقط برای تغییرات کوچک و در حد یک المان مناسب است تا موجب شلوغی بیش ازحد صفحات نشود. به این نوع سی اس اس اصطلاحا inline گفته می شود.

مثال:‌  <p style="color: red;"> متن با رنگ قرمز </p>

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

روش دوم به صورت داخلی

در این روش از تگ <style> در تگ <head> استفاده می کنیم، این نوع سی اس اس را internal یا داخلی می گویند. در این روش استایل های ما تنها در همان صفحه خوانده می شوند و در صفحات دیگر قابل دسترسی نیست.

<head>
<style>
body{
background-color: blue;
}

h1{
color: red;
margin-left: 40px;
}
</style>
</head>

 قسمت رنگی یک کد سی اس اس است.

روش سوم به صورت یک فایل خارج صفحه

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

<head>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

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

آموزش کامل HTML – قسمت اول: آشنایی کلی

مقدمه

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

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

ساخت اولین صفحه html

این کار بسیار ساده است و به ابزار خاصی نیاز ندارد، شما با نوت پد ویندوز هم می توانید یک سند html بسازید. ولی پیشنهاد می کنیم که از ++NotPad استفاده کنید، ویرایشگرهای دیگری نیز هستند که شما می توانید از آنها استفاده کنید.

  1. نوت پد را باز کرده و هر متنی که دوست دارید در آن بنویسید.
  2. حالا آن را با پسوند html ذخیره کنید.
  3. موقع ذخیره کردن فایل اینکدینگ فایل را روی utf-8 قرار دهید.
  4. فایل را از هرجایی که ذخیره کردید اجرا کنید.

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

تگ های html:

تمام کدهای html بین دو علامت <> قرار می گیرند که به آن ها تگ می گوییم. گاهی به تگ html المان هم می گویند. از تگ ها به صورت زیر استفاده می کنیم.

<tagname> محتوا </tagname>

به تگ اول opening tag و به تگ دوم closing tag گفته می شود، قالب تگ های html به صورت فوق می باشند. هر چیز در تگ مربوط به خودش قرار می گیرد.

کد یک صفحه ساده html:

<!DOCTYPE html>

<html>

<head>

<title>  عنوان صفحه | پردیس وردپرس  </title>

</head>

<body>

<h1>  تگ عنوان 1 </h1>

<p>  تگ پاراگراف یا متن  </p>

</body>

</html>

توضیح کد:

  • <!DOCTYPE html> جمله اول هر سند html می باشد، این جمله باید همیشه در ابتدای سند اچ تی ام ال قرار گیرد.
  • همه محتویات یک صفحه html در بین تگ های <html> قرار می گیرد، ازجمله تگ های دیگر مانند تگ هد یا …
  • تگ <head> اطلاعات ابتدایی در رابطه با صفحه را در بر می گیرد. مثلا نام نویسنده صفحه یا اطلاعاتی در رابطه با سایت، معمولا چیزهایی که در این تگ نوشته می شوند مستقیما در صفحه نمایش داده نمی شود.
  • تگ <title> یک عنوان برای صفحه وب نشان می دهد، این عنوان در نوار عنوان نشان داده می شود.
  • تگ <body> بدنه صفحه اچ تی ام ال ما را مشخص می کند و تمام کد ها و محتوایی که در صفحه نشان داده می شوند در این تگ قرار می گیرد.
  • تگ <h1> برای نشان دادن عنوان های در صفحه به کار می رود.
  • تگ <p> برای قرار دادن پاراگراف یا متن در صفحات وب به کار می رود.

برای نشان دادن حروف فارسی در صفحات html از کد متای <“meta charset=”UTF-8> استفاده می کنیم، این کد را باید در تگ هد قرار دهیم.

خب برای قسمت اول تا همین جا کافیست،در قسمت های بعدی بصورت کامل تر و دقیق تر با html آشنا می شویم.

 

آموزش کامل وردپرس – قسمت اول: نصب و راه اندازی

مقدمه

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

نصب و راه اندازی

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

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

نصب سرور محلی wamp

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

ابتدا نرم افزار ومپ را از اینجا دانلود کنید و شروع به نصب آن کنید. نصب نرم افزار نکته خاصی ندارد فقط در مراحل آخر وقتی به مرحله زیر رسیدید روی دکمه open کلیک کرده (دراین قسمت می توانید مرورگر پیش فرض را انتخاب کنید) و در پنجره بعدی بدون تغییر دکمه next را بزنید (البته تغییر SMTP و ایمیل مشکلی به وجود نمی آورد).

انتخاب مرورگر

سپس روی Finish کلیک کنید تا نصب تمام شود.

چند نکته در مورد اجرای wamp

  • هر بار که شما wamp را اجرا کنید در قسمت Notifcation های ویندوز آیکون wamp را مشاهده می کنید.
  • به رنگ آیکون توجه کنید که باید سبز باشد، در غیر اینصورت مشکلی وجود دارد. بیشترین موارد مشکلی که در این قسمت به وجود می آید مربوط به پورت برنامه می باشد که ممکن است توسط برنامه ای دیگر در ویندوز اشغال شده باشد مثلا نرم افزار اسکیوال سرور ماکروسافت یا … (برای رفع مشکلات این چنینی می توانید زمان استفاده از ومپ سرویس برنامه های دیگری که از پورت 80 استفاده می کنند را متوقف کرد و یا کلا پورت را عوض کرد)
  • مشکلات فوق معمولا برای سرویس آپاچی برنامه به وجود می آید که بعد از رفع مشکل می توانید روی آیکون ومپ در نوتیفیکیشن ویندوز کلیک کرده و سرویس آپاچی را استارت کنید.

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

نصب وردپرس

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

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

روش دوم آدرس http://localhost/phpmyadmin را در مروگر وارد می کنیم.

در هر دو صورت صفحه زیر باز میشود:

مای اسکیوال

در قسمت مشخص شده در باکس سمت چپ نام دیتابیس و در باکس کشویی سمت راست گزینه utf8_Persian_ci را انتخاب کرده و روی create کلیک کنید. (ما نام دیتابیس را wp-test گذاشتیم)

حال به آدرسی که ومپ را در آن نصب کردید رفته و وارد مسیر (مثلا: C:\wamp\www) می شویم، باید در پوشه www وردپرسمان را نصب کنیم. (این پوشه در واقع همان ریشه اصلی سایت ما خواهد بود.

ابتدا در این پوشه (www) یک پوشه به نام test درست می کنیم، سپس فایل ورد پرسی که دانلود کردیم را در این پوشه اکسترکت می کنیم (توجه داشته باشید که فایل ها در این پوشه باید بصورت زیر باشند).

اکسترکت

حال نوبت به نصب ورد پرس میرسد، آدرس http://localhost/test را در مروگر وارد می کنیم که باید صفحه زیر را ببینید.

انتخاب زبان ف

مراحل را ادامه دهید تا به صفحه زیر برسید.

نصب وردپرس 1

مطابق تصویر نام پایگاه داده و نام کاربری را واردکنید و به مرحله بعد بروید. (نام پایگاه داده همان نام دیتابیسی که خود انتخاب کردید و نام کاربری root است)

رمز را خالی و بقیه گزینه ها را نیز بدون تغییر باقی می گذاریم و به مرحله بعد می رویم.

نصب وردپرس 2

در این قسمت عنوانی دلخواه برای سایت، نام کاربری و رمز عبور، تیک تایید استفاده از رمز ضعیف و ایمیلی دلخواه را وارد می کنیم. (نام کاربری و رمز عبور برای وارد شدن به پنل مدیریتی وردپرس استفاده می شود و تیک نمایش به موتورهای جستجو در هاست محلی اهمیتی ندارد)

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

برای ورود به پنل مدیریت از آدرس http://localhost/test/wp-admin استفاده می کنیم.

پایان قسمت اول آموزش کامل وردپرس

آموزش کامل PHP – قسمت اول: مقدمه و نصب

مقدمه

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

نصب + ابزارهای مورد نیاز

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

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

xampp در ویندوز، لینوکس یا مک قابل استفاده است و wamp هم برای ویندوز مناسب می باشد. ما ادر این آموزش از زمپ استفاده خواهیم کرد و هیچ فرقی ندارد که از کدام برنامه استفاده کنید.

ابتدا جدیدترین نسخه برنامه Xampp با توجه به سیستم عامل خود را از اینجا دانلود کنید.

صفحه دانلود زمپ

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

سپس نرم افزار را اجرا کرده و دکمه استارت جلوی گزینه های Apache و MySql را بزنید، شکل زیر را مشاهده می کنید.

صفحه شروع زمپ

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

حالا مروگر خود را باز کرده و آی پی 127.0.0.1 یا کلمه localhost را در نوار آدرس تایپ کنید، باید تصویری مشابه زیر مشاهده کنید.

هاست محلی

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

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

اولین پروژه در php

خب تا اینجا شما سیستم خود را برای برنامه نویسی php آماده کردید، حال نیاز به یک محیط برای کد نویسی دارید که تفاوتی ندارد در چه محیطی کد ها نوشته شوند ولی ما ++NotPad را به شما پیشنهاد می کنیم که می توانید آن را از اینجا دانلود کنید.

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

ویرایشگر پی اچ پی

حالا نوت پد شما برای برنامه نویسی به زبان پی اچ پی آماده است.

شروع برنامه نویسی PHP

ابتدا باید بدانید که تمام فایل های نوشته شده به زبان پی اچ پی در پوشه ریشه سرور محلی شما ( مثلا: C:/xampp/htdocs ) قرار داشته باشند. ریشه سرور شما در رایانه‌تان پوشه htdocs است که خود در زیر پوشه‌ی Xampp قرار دارد. دقت کنید اگر هنگام نصب Xampp مسیر نصب آن را تغییر داده باشید باید به محلی که xampp را درآن نصب کردید بروید. سایر پوشه های زیر شاخه xampp را دستکاری نکنید تا مشکلی به وجود نیاد، بهتر است برای هر پروژه فولدری جداگانه در نظر بگیرید.

ایجاد اولین پروژه

به مسیر ریشه یا همان پوشه htdocs رفته و پوشه ای به نام مثلا hello ایجادکنید، حال ++NotPad را باز کرده و کدهای زیر را درآن وارد کنید و فایل را با پسوند php. ونام مورد نظرتان در مسیر hello ذخیره کنید.

<?php echo “Hello This Is Learning PHP From Pardiswp.com!”; ?>

نام فایل ما test.php است و با آدرس http://127.0.0.1/hello/test.php در مروگر قابل اجراست. خروجی آن عبارت

!Hello This Is Learning PHP From Pardiswp.com در مرورگر است. حال به چند نکته در مورد کدنویسی می پردازیم:

  • فایل های نوشته شده به زبان پی اچ پی باید با پسوند php. ذخیره شوند.
  • کدهای زبان پی اچ پی با تگ php?> شروع و با تگ <? خاتمه می یابند.
  • هر چیزی که بین این تگ ها قرار داشته باشد سرور آن را به عنوان دستورات php در نظر گرفته و پردازش می کند.
  • هر چیزی که خارج از این برچسب ها نوشته شود عینا در مرورگر نشان داده می شود که می تواند متن ساده، کد html و یا css باشد.

بسیار خب تا این جا شما قدم اول برای برنامه نویسی به زبان php را برداشته اید، در جلسات آینده با پردیس وردپرس همراه باشید تا شما را رسما وارد دنیای پی اچ پی کنیم. این دوره آموزشی از پایه شروع شده و با تمرین و پروژه محور خواهد بود.