بلاگ

Name: دانگو وب
Telephone: +989119861103

متاباکس چیست چگونه یک متاباکس ایجاد کنیم
متاباکس چیست

به زبان ساده Metabox ها در وردپرس قابلیت/قسمتی برای دریافت و یا نمایش اطلاعات است. قابل تنظیم با توجه به نیازها، و دارای ویژگیهایی نظیر کشیدن و رها کردن و باز و بسته شدن می‌باشند. نمونه‌های مختلفی از آنها را در قسمت ایجاد یک نوشته می‌توانید مشاهده کنید؛ مانند متاباکس انتشار، نویسنده، برچسب‌ها و…

دلایل استفاده از متاباکس بسته به نیاز متفاوت است. اما برای ایجاد ویژگی‌های جدید در وردپرس مورد استفاده قرار می‌گیرد. برای مثال اگر می‌خواهید فیلدهای مختلفی را در تمام نوشته‌هایی که منتشر می‌کنید به نمایش بگذارید دو روش در پیش‌رو دارید:
1. استفاده از زمینه‌های دلخواه
2. استفاده از متاباکس
استفاده از زمینه‌های دلخواه در مواردی که تعداد استفاده از آن زیاد نباشد بهترین گزینه است! اما اگر طبق مثال بالا برای هر نوشته به تعداد متعددی فیلد و اطلاعات نیاز دارید بهتر است از متاباکس استفاده کنید. در ادامه با چگونگی یک متاباکس در قسمت نوشته‌ها آشنا می‌شوید.

ایجاد متاباکس وردپرس
```
add_action('add_meta_boxes', 'dw_addmeta');

function dw_addmeta() {
    add_meta_box('dangoweb-metabox', 'metabox title', 'metabox callback', 'post', 'advanced', 'low');
}
```
توضیحات:

-در خط ابتدایی با ایجاد add_action و استفاده از اکشن add_meta_boxes با استفاده از تابعی که در ادامه با نام dw_addmeta (هرنامی می‌تواند باشد) قرار گرفته متاباکس خود را در زمان ایجاد متاباکس‌ها اضافه می‌کنیم.

-در خط بعدی تابع خود را ایجاد می‌کنیم.

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

id: شناسه متاباکس (نام دلخواه)

title: عنوان متاباکس

callback: محتوای اصلی که می‌تواند شامل نوشته، فرم، فیلد و… باشد. (با استفاده از یک تابع می‌توان محتوای مورد نظر را وارد کرد)

screen: مکان نمایش متاباکس را مشخص می‌کند. (post, page, dashboard, link …)

context: مکان قرارگیری متاباکس در صفحه که شامل مقادیر advanced و side می‌باشد. در صفحه ایجاد نوشته اگر توجه کنید دو تا قسمت وجود دارد که یک قسمت در برگیرنده ویرایشگر، زمینه‌های دلخواه و.. بوده که بخش اصلی است؛ و قسمت دیگر نوارکناری بوده و شامل انتشار، برچسب‌ها، دسته بندیها و…
- advanced: نمایش متاباکس در بخش اصلی
- side: نمایش متاباکس در نوارکناری
priority: اولویت قرارگیری متاباکس شامل مقادیر (high, core, default, low) می‌باشد.

با استفاده از این آموزش می‌توانید یک متاباکس را برای سایت خود ایجاد کنید. اما برای اینکه بتوانید اطلاعات خود را وارد، ذخیره و به نمایش بگذارید در مطلب چگونه اطلاعات متاباکس را ذخیره کنیم را مطالعه کنید.
۱۳۹۶-۰۴-۱۰
شخصی‌سازی منوی پیشخوان در وردپرس
افزونه‌های زیادی وجود دارند که پس از فعالسازی، نام افزونه و لینک به صفحه‌ی تنظیمات را بصورت خودکار در منوی پیشخوان اضافه می‌کنند. در این آموزش قصد داریم با استفاده از تکه کد زیر لینک موردنظر خود را به منوی پیشخوان بیفزاییم. بدین صورت می توان منوی پیشخوان را با توجه به نیاز خود شخصی‌سازی کنیم.
```
add_action('admin_bar_menu', 'add_menubar', 999);

function add_menubar()
{
    global $wp_admin_bar;
    $wp_admin_bar->add_menu(array('id' => 'my_menu', 'title' => 'منوی من', 'parent' => 'root-default'));
}

add_action('admin_bar_menu', 'add_link_menubar', 999);
function add_link_menubar()
{
    global $wp_admin_bar;
    $wp_admin_bar->add_menu(array('id' => 'my_menu', 'title' => 'منوی من', 'parent' => 'root-default', 'href' => 'https://dangoweb.ir'));
}
```
-ابتدا به وسیله‌ی اکشن به قلاب admin_bar_menu متصل می‌شویم. با استفاده از این قلاب می‌توانیم تغییرات مورد نظر خود را در منوی پیشخوان اعمال کنیم. سپس نام تابعی که قرار است تغییرات مورد نظر خود را در آن ایجاد کنیم می‌نویسیم. در اینجا نام تابع add_menubar درنظر گرفته شده است. شما می توانیم نام دلخواه خود را بنویسید.

-در مرحله بعدی تابع add_menubar را ایجاد می کنیم.

-برای ایجاد منو نیاز به یک شی در ودپرس به نام wp_admin_bar داریم که در قالب متغییر سراسری (global) در دسترس قرار می گیرد.

-پس از فراخوانی شی wp_admin_bar از متد add_menu استفاده می‌کنیم. این متد شامل یک آرایه با پارامترهای id, title, parent, href, group, meta می‌باشد. البته نیاز به تکمیل همه‌ی این پارامترها نیست!
- id: شناسه منحصربفرد (دلخواه)
- title: عنوان یا متن منو
- parent: والد منوی ساخته شده (جایگاه منو)
- href: پیوند متن
- meta: ویژگی‌های اضافه که خود شامل آرایه‌ای با پارامترهای مختلف است.
نکته‌ای که درباره پارامتر parent باید اضافه شود، جایگاهی است که با توجه به شناسه در منوی پیشخوان مورد استفاده قرار می گیرد. به زبان ساده منوی پیشخوان دارای دو منوی جداگانه با نام‌های root-defualt و top-secondary می باشد. منوی اول شامل جایگاه‌های لوگو، لینک سایت، دیدگاه‌ها و… است. و منوی دوم مربوط به لینک پروفایل و خروج است. با استفاده از هریک از این شناسه ها و همچنین دیگر شناسه‌هایی که در منوی پیشخوان وجود دارد می‌توان جایگاه لینک ساخته شده را تغییر داد.

اگر پارامتر parent نوشته نشود و یا خالی رها شود؛ بصورت پیشفرض در شناسه root-defualt قرار می‌گیرد.

اگر دقت کرده باشید در زمان ایجاد اکشن، پس از اضافه کردن تابع، عددی قرار گرفته است! این عدد نشانگر اولویتی است که لینک شما در منو دارد. هرچه این عدد بیشتر باشد جایگاه لینک ساخته شده به قسمت انتهایی منو حرکت می‌کند. اما اگر این اولویت نوشته نشود به صورت پیشفرض جایگاه لینک ساخته شده در ابتدای منو ثبت می‌شود.
۱۳۹۶-۰۳-۱۰
clearing floats چیست
شاید بارها با کلمه clearing floats یا پاکسازی شناورها در طراحی تحت وب مواجه شده باشید. اما آیا می‌دانید این روش چیست و برای چه از آن استفاده می‌شود؟ عناصری که به وسیله‌ی ویژگی float در CSS به سمت چپ یا راست شناور شده باشند به درستی نمی‌توانند ارتفاع عنصر والدی که در آن قرار دارند را افزایش دهند. برای درک بهتر کدهای زیر را مشاهده کنید:
```
#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #CCC;
 padding: 5px;
}
.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}
```
```
<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>
```
DIVهایی با کلاس floated_box درون یک DIV والد با شناسه main_container قرار دارند، اما همانطور که در تصویر زیر مشاهده می‌کنید، تصور می‌شود که DIVهای با کلاس floated_box خارج از عنصر والد خود قرار دارند.

برای برطرف کردن این مشکل یک راهکار ساده وجود دارد و آن هم استفاده از ویژگی clear در CSS است. این DIV خالی را بعد از آخرین عنصر شناور خود قرار دهید:
```
<div style="clear: both;"></div>
```
همانطور که مشاهده می‌کنید با ویژگی clear و با مقدار دهی both به آن، مشکل ارتفاع عنصر والد حل شد.
۱۳۹۶-۰۳-۰۴
آموزش طراحی وب – جلسه دهم – ویژگی شناوری
در ادامه مباحث آموزش طراحی تحت وب با جلسه دهم همراه شما عزیزان خواهیم بود. دو جلسه قبلی اختصاص یافت به آموزش CSS و ویژگی های آن. این جلسه نیز ادامه آن مباحث خواهد بود.

ویژگی شناوری چیست

float یا ویژگی شناوری خاصیتی در CSS است که مشخص می کند عنصر مورد نظر در کدام جهت (چپ یا راست) قرار بگیرد.

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

float دارای مقادیری همچون:
- none : عنصر مورد نظر شناوری ندارد.
- left : عنصر در سمت چپ شناور است.
- right : عنصر در سمت راست شناور است.
- initial : شناوری پیشفرض.
- inherit : دریافت شناوری از عنصر والد.
مثال:

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

در سند html به این صورت عمل می کنیم:
```
<html>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>
```
در سند CSS بصورت زیر عمل می کنیم:
```
.left-block{
 float:left;
 border: 2px solid red;
 width:200px;
 height:400px;
}
.right-block{
 float:right;
 border: 2px solid red;
 width:200px;
 height:400px;
}
```
در سند HTML چه خبر؟!

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

برای ایجاد عناصر مورد نظر می توان از برچسب دوطرفه div استفاده کرد.

در سند CSS چه خبر؟!

در سند CSS چون از کلاس برای برچسب ها استفاده کردیم پس ابتدا یک نقطه قرار داده و سپس نام کلاس را نوشتیم. در ابتدای ویزگی ها مشخص کردیم که هریک از ستون در کدام سمت قرار بگیرد. برای همین از ویزگی شناوری با مقداردهی left و right استفاده کردیم. در خط دوم از ویژگی border برای قرار دادن یک مرز و تفکیک ستون ها از یکدیگر استفاده شد. که قطر آن برابر شد با 2px و مقدار برابر با solid (در جلسات بعدی توضیح داده خواهد شد) قرار گرفت و در انتها رنگ border مشخص شد. همچنین برای هریک از ستون ها عرض و ارتفاع در نظر گرفته شد که با ویزگی های height و width مشخص هستند. بدین صورت توانستیم با یادگیری ویژگی شناوری عناصر خود را در سمت راست یا چپ ثابت کنیم.
۱۳۹۶-۰۲-۱۳
افزودن محتوا به مطالب با استفاده از فیلتر در وردپرس
وردپرس به دلیل گستردگی در ارایه امکانات، یکی از بهترین سیستم‌های مدیریت محتواست که می توان هر تغییری را بدون نیاز به دستکاری در فایلهای اصلی آن انجام داد. یکی از این امکانات ایجاد تغییر در خروجی با استفاده از فیلترها است. مبحث فیلترها در وردپرس بسیار ساده اما نیاز به کار و آشنایی دارد. در این آموزش با یک تمرین ساده شروع می‌کنیم تا بتوانیم در ادامه با آموزش‌های حرفه‌ای‌تری نیازهای خود را برطرف کنیم.

نکته: فیلترها در وردپرس برای ایجاد تغییرات در خروجی مورد استفاده قرار می گیرد.

این آموزش درباره اضافه کردن محتوا (متن، تصویر و…) به مطالب در وردپرس است. در اینجا می‌خواهیم با استفاده از تکه کد زیر و فیلتر در وردپرس این تغییر را در مطالب ایجاد کنیم.
```
add_filter('the_content', 'addContent');

function addContent($content) {
    return $content . '<div><strong>' . 'محتوای add_filter('the_content', 'addContent');

function addContent($content) {
    return $content . '<div><strong>' . 'محتوای مورد نظر برای قرارگیری در انتهای مطالب در وردپرس' . '</strong></div>';
}
```
تابع add_filter در تکه کد بالا دارای دو برچسب می باشد. برچسب ابتدایی، قلاب the_content بوده که برای ایجاد تغییرات در مطالب وردپرس بکار برده می شود؛ و برچسب دوم، نام تابعی است که با استفاده از آن تغییرات را به add_filter برای اجرا می دهیم(هرنامی می تواند باشد).

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

سپس در ادامه می توانیم محتوای مورد نظر خود را با استفاده از برچسب‌های HTML نوشته و با قرار دادن کدهای خود در function.php پوسته آن را در تمامی مطالب خود مشاهده کنید. از این آموزش می توان برای قرار دادن متن‌ها و یا تصاویر و… برای اطلاع‌زسانی یا تبلیغات استفاده کرد.
۱۳۹۶-۰۲-۱۰
تبدیل نشانی‌های قدیمی از http به https
در آموزش تغییر مسیر نشانی سایت از http به https در وردپرس روش انتقال نشانی سایت پس از فعالسازی گواهی https آموزش داده شد. اما برخی کاربران از اینکه نشانی های موجود در مطالب و همچنین تصاویر کماکان از پروتکل http استفاده می کند گله مند بودند؛ تصمیم بر نوشتن این آموزش برای رفع این مشکل گرفتم.

در این آموزش فرض را بر این گذاشتیم که شما مرحله اول انتقال نشانی به پروتکل https که در پیوند بالا اشاره شد را گذرانده اید. پس از آن شما باید نشانی های موجود در نوشته اعم از پیوندها و تصاویر را تغییر دهید. اینکار را می توان به دو روش انجام داد:
1. استفاده از افزونه‌های مرتبط
2. بکارگیری کوئری در mysql
ابتدا دو افزونه را برای انجام اینکار معرفی کرده سپس روش استفاده از کوئری را پی می گیریم.

افزونه Search & Replace

از این افزونه برای جستجو و جایگزینی هرموردی در پایگاه داده استفاده می شود. برای حل مشکل نشانی ها در سایت خود ابتدا افزونه را از مخزن وردپرس نصب کرده و پس از فعالسازی آن، از فهرست مدیریت > ابزار > Search & Replace را انتخاب کنید. پس از ورود، از زبانه Backup Database و با کلیک برروی دکمه Create SQL File از پایگاه داده خود پشتیبان تهیه کرده تا در صورت ایجاد مشکل بتوانید آن را بازیابی کنید. سپس مانند تصویر زیر به زبانه Search & Replace رفته و در فیلد مربوط به Search for نشانی قبلی خود و در فیلد Replace with نشانی جدید خود که از پروتکل https استفاده می کند را بنویسید.

پس از وارد کردن نشانی از قسمت Select tables که انتخابگر جداول موجود در پایگاه داده شماست، تمام آنها را انتخاب کرده و بر روی دکمه Do Search & Replace کلیک کنید تا جستجو و جایگزینی به اتمام برسد. با استفاده از این افزونه به راحتی هرچه تمام‌تر می توانید نشانی‌های خود و همچنین تغییرات دیگر را در پایگاه داده خود انجام دهید.

افزونه SSL Insecure Content Fixer

این افزونه تنها برای رفع مشکل ناامن بودن نشانی‌ها مورد استفاده قرار می گیرد و عملا برای جایگزینی ریشه‌ای مانند افزونه قبلی که معرفی شد نیست؛ اما میتواند تکمیل کننده آن باشد. تا اگر مشکلی در نشانی‌ها وجود داشت رفع نماید. پس از نصب این افزونه از مخزن وردپرس از فهرست مدیریت > SSL Insecure Content رفته و گزینه Capture All را فعال و تنظیمات را ذخیره کنید.

بکارگیری کوئری در mysql برای جایگزینی نشانی

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

پس از ورود به مدیریت هاست خود (Cpanel or DirectAdmin) وارد phpmyadmin شده و پایگاه داده وردپرس خود را انتخاب کنید. وارد زبانه SQL شده و کوئری‌ های زیر را نوشته و اجرا کنید.

توجه: نشانی سایت خود را جایگزین نشانی dangoweb.ir کنید.

-جایگزینی در سطر post_content
```
UPDATE wp_posts SET `post_content` = REPLACE (`post_content`, 'src="http://dangoweb.ir', 'src="https://dangoweb.ir');
```
-جایگزینی در سطر guid
```
UPDATE wp_posts SET `guid` = REPLACE (`guid`, 'src="http://dangoweb.ir', 'src="https://dangoweb.ir');
```
با بکارگیری این روش نشانی‌های شما با نشانی جدید جایگزین و مشکل رفع خواهد شد!
۱۳۹۶-۰۲-۰۵
تغییر مسیر نشانی سایت از http به https در وردپرس
پس از فعالسازی گواهی https برای سایت معمولا این مشکل وجود دارد که چگونه نشانی های مختلف را از پروتکل http به https انتقال دهیم. در این آموزش کوتاه به راحتی می توانید با چند تغییر کوچک این کار را بدون نیاز به اطلاعات خاصی انجام دهید. ابتدا باید مطمئن شوید که گواهی https در هاست شما فعال شده باشد. پس از اطمینان از فعالسازی به قسمت تنظیمات همگانی در وردپرس رفته و نشانی سایت را از پروتکل http به https تغییر داده و ذخیره کنید.

در مرحله بعدی به هاست خود وارد شده و فایل .htaccess را در حالت ویرایش باز کنید و کد زیر را در آن بیابید:
```
# BEGIN WordPress 
 <IfModule mod_rewrite.c> 
 RewriteEngine On RewriteBase / 
 RewriteRule ^index\.php$ - [L] 
 RewriteCond %{REQUEST_FILENAME} !-f 
 RewriteCond %{REQUEST_FILENAME} !-d 
 RewriteRule . /index.php [L] </IfModule> 
 # END WordPress
```
و این کد را در بالای آن قرار دهید:
```
RewriteCond %{ENV:HTTPS} !=on 
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]
```
با این روش ساده تمامی نشانی های مورد نظر شما در سایت بصورت خودکار از http به https منتقل خواهد شد. و اما برای تبدیل نشانی های قدیمی وردپرس که امکان ایجاد خطا در مرورگر را فراهم می‌کند می توانید از آموزش تبدیل نشانی های قدیمی از http به https استفاده کنید.
۱۳۹۶-۰۱-۱۸
ویرایشگرهای قدرتمند برای کدنویس ها
با پیشرفت نرم افزارها و همچنین افراد علاقه مند در زمینه برنامه نویسی و طراحی، ویرایشگرها بخوبی جای خود را در میان پراستفاده ترین نرم افزارها باز کردند. با توجه به سلیقه و همچنین راحتی، برنامه نویس ترجیح می دهد در محیطی ویرایش کدهای خود را انجام دهد که از لحاظ طراحی بصری، در دسترس بودن ابزارها و همچنین تنوع پشتیبانی از زبان های مختلف با معیارهای خود متناسب باشد.

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

IDE چیست؟

Integrated Development Environment به معنی محیط توسعه یکپارچه (مجتمع) می باشد. محیطی است که ابزارهای مورد نیاز برای تولید یک نرم افزار را در اختیار کاربر قرار می دهد.

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

Apache NetBeans

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

این نرم‌افزار با اینکه بیشتر امکانات یک ویرایشگر حرفه ای را داراست، متن باز و رایگان نیز می باشد! از قابلیتهای مهم NetBeans می توان به پشتیبانی از زبان های مختلف از جمله HTML / PHP / JS / C / C++ / JAVA پایگاه داده Oracle، تکمیل کد و غیره اشاره کرد.

این نسخه که توسط اوراکل توسعه داده می شد به بنیاد آپاچی واگذار شد و با نام جدید Apache NetBeans در دسترس قرا گرفته است.
- رایگان
- متن‌باز
- پشتیبانی از زبانهای برنامه‌نویسی مختلف
Brackets

برای آن دسته از کاربرانی که ابزارها و امکانات مختلف در ویرایشگرهای حرفه ای (مانند NetBeans) برایشان مهم نیست و بیشتر به سبک بودن و همچنین محیط دیداری زیبا اهمیت می دهند Brackets یک نمونه از ویرایشگرهای سبک و زیباست که می تواند نیاز یک کاربر غیرحرفه ای تا پیشرفته را مرتفع کند. از قابلیتهای مهم Brackets می توان به سبک و زیبا بودن و همچنین وجود مخزن افزونه های مختلف برای اضافه کردن و ارتقا ابزارهای مورد نیاز کاربر اشاره کرد.
- رایگان
- سبک و زیبا
- مخزن افزونه
Sublime Text

این ویرایشگر نیز همانند Brackets بوده با این تفاوت که در این نرم افزار از مخزن افزونه ها خبری نیست. اما با توجه به ظاهر زیبا و همچنین امکاناتی که برای راحتی کدنویسی به کاربر ارایه می دهد مورد توجه بسیاری از کدنویسان قرار گرفته است. نکته منفی در مورد این ویرایشگر هماهنگ نبودن آن با زبان فارسی است.
- رایگان
- هماهنگ نبودن با زبان فارسی
JetBrains PhpStorm

یک ویرایشگر همه‌کاره، قدرتمند و باهوش که تمامی نیازهای یک کدنویس را برآورده میکند. از قابلیتهای مهم PhpStorm می توان به پشتیبانی از زبان های تحت وب، ارایه ابزارهای گوناگون برای کار با کدها، خطایابی هوشمند با ارایه توضیحات در مورد چگونگی رفع آن، جستجوی هوشمند کدها و فایلها اشاره کرد.
- غیررایگان
- دارای افزونه‌های مختلف
- خطایابی هوشمند
- جستجوی هوشمند
notepad++

بیشتر کاربران معمولی و حرفه ای با این نرم افزار آشنا هستند. notepad++ را می توان نسخه ارتقا یافته و بسیار پیشرفته notepad رایانه دانست که بصورت رایگان در اختیار کاربران قرار گرفته است. از قابلیتهای مهم notepad++ می توان به سبک و آسان بودن کار با آن، وجود افزونه ها، پشتیبانی از زبان های برنامه نویسی مختلف، متمایز کردن کدها از متون با استفاده از رنگ، استفاده از زبانه ها وغیره اشاره کرد.
- رایگان
- ساده، سبک و کاربردی
komodo IDE

ویرایشگر کد komodo در دو نسخه komodo IDE و komodo Edit موجود می‌باشد. این ویرایشگر نیز مانند دیگر ویرایشگرهای رایگان، دارای امکانات متفاوتی برای برنامه‌نویسان است. از نکات مثبت komodo چندزبانه بودن در کنار ظاهر آراسته و زیباست. نکته منفی در مورد این ویرایشگر کند بودن آن است.
- رایگان
در انتها باید گفت ویرایشگرهای مختلفی بصورت رایگان و غیررایگان وجود دارند که ممکن است با توجه به امکانات و همچنین ظاهر مورد توجه قرار گیرند. توصیه من به شما این است که اگر میخواهید تا در محیط کدنویسی خود راحت باشید و بدون دغدغه کار خود را انجام دهید ویرایشگری را انتخاب کنید که نیاز شما را با توجه به بزرگی پروژه، یادگیری و…برآورده کند. این تعداد ویرایشگری که معرفی شد شاید بهترین نباشند اما برترین هستند! پس خودتان آنها را امتحان کنید.
۱۳۹۶-۰۱-۱۰
آموزش طراحی وب – جلسه نهم
با جلسه نهم از سری آموزش های طراحی وب در خدمت شما دوستان عزیز هستیم. در جلسه قبلی انواع مختلف استایل نویسی و طریقه استفاده از آنها در داخل سند یا سند خارجی CSS را با یکدیگر مرور کردیم. حال با کمی ریز شدن در مسئله ادامه مباحث مربوط به CSS را پی میگیریم.

ID و CLASS در استایل نویسی

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

تعریف ID و CLASS در برچسب

آیدی و کلاس همانطور که دارای املای منحصر به خود هستند، دارای مشخصه‌ی خاصی برای استفاده در سند CSS نیز می باشند. این مشخصه ها به ترتیب برای آیدی “#” و برای کلاس “.” می باشد. که در ادامه در مورد آنها توضیح خواهم داد.

برای اینکه بخواهید به یک برچسب با استفاده از css تغییرات دلخواه خود را اعمال کنید، ابتدا باید نحوه تعریف آیدی و کلاس را در برچسب ها بیاموزید. برای اینکار در برچسب مورد نظر (در برچسب دوطرف قسمت باز برچسب مد نظر است) با نوشتن حرف کلیدی ID یا CLASS سپس قرار دادن “=” و پس از آن قرار دادن دبل کوتیشن “” آیدی یا کلاس خود را تعریف کنید. اما برای شناسایی این برچسب و اعمال تغییرات به وسیله‌ی CSS باید نامی برای آن انتخاب کرد و آن را در دبل کوتیشنی که پس از مساوی قرار داده شده وارد کرد.

مانند:
```
<p class="name">
این یک پاراگراف است
</p>
```
همانطور که در کد بالا مشاهده می کنید. ما یک برچسب پاراگراف را ایجاد کردیم تا بتوانیم به وسیله‌ی css تغییرات خود را اعمال کنیم. چنین روشی را می توان برای تمام برچسب ها مورد استفاده قرار داد.

نکته: گاهی اوقات طراح برای صرفه جویی در وقت و همچنین کدنویسی تمیز و… به جای استفاده از روش کلاس‌دهی، از نام برچسب برای ایجاد تغییرات در CSS بهره می برد.

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

تعریف ID و CLASS در سند CSS

تعریف آیدی یا کلاس در سند CSS دارای چند نکته کلیدی است که با یادگیری آن دیگر مشکلی برای استایل نویسی حرفه‌ای نیز نخواهید داشت!

یک آیدی یا کلاس شامل سه قسمت:
1. انتخابگر
2. ویژگی
3. مقدار
می باشد.

انتخابگر

مورد اول: همانطور که گفته شد مشخصه آیدی “#” و مشخصه کلاس “.” می باشد. این مشخصه ها در اینجا کاربرد خواهند داشت.

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

اکنون شما قسمت اول یعنی انتخابگر را درک کردید. پس برای اینکه یک آیدی یا کلاس در سند CSS تعریف شود، ابتدا “#” یا “.” قرار می گیرد سپس نامی که برای آنها در نظر گرفته اید. حال باید از کروشه باز و بسته استفاده کنید “{ }” تمام ویژگی های مربوط به یک آیدی یا کلاس درون این کروشه ها قرار می گیرند و زمانی که خارج از آنها باشد بلااستفاده و باعث ایجاد مشکلات می شود.

ویژگی و مقدار

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

دو نکته در نوشتن ویژگی ها وجود دارد و آن استفاده از نقطه نقل و قول “:” پس از نام ویژگی و نقطه ویرگول “;” در انتهای دستور می باشد. همیشه باید پس از نوشتن نام ویژگی نقطه نقل و قول قرار گیرد. سپس مقدار نوشته می شود. اما قرارگیری نقطه ویرگول در انتها وابسته به دو نکته بوده، آن هم وجود بیش از یک ویزگی در یک آیدی یا کلاس. یعنی اگر تنها یک ویژگی در آیدیی یا کلاس نوشته شده باشد قرار دادن نقطه ویرگول در انتهای دستور الزامی نیست. اما اگر بیش از یک ویزگی داشته باشیم الزامی می باشد.
۱۳۹۵-۱۲-۰۹
آموزش طراحی وب – جلسه هشتم – CSS
با جلسه هشتم از سری آموزش های طراحی تحت وب در خدمت شما دوستان هستیم. در این جلسه با بُعد دیگری از طراحی تحت وب آشنا می شوید که برای ایجاد قابلیت های مختلف از جمله زیباسازی استفاده می شود.

CSS چیست

Cascading Style Sheet یا CSS زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در html مورد استفاده قرار می گیرد.

حال برای اینکه بدانیم چگونه می توان از CSS برای زیباسازی سند خود استفاده کرد ابتدا باید با چگونگی فراخوانی آن در سند html آشنا شد. فراخوانی css به ۳ صورت انجام می پذیرد:
1. سبک در خط (inline)
2. سبک داخلی CSS
3. سبک خارجی CSS
سبک در خط (Inline style)

ساده ترین راه برای استفاده از CSS قرار دادن آنها بصورت مستقیم در درون برچسب هاست. برای همین از این راه به عنوان درخط یا Inline یاد می شود. زیرا می توان تمام ویژگی های CSS را در درون خطوط HTML و برچسب ها مورد استفاده قرار داد. ساختار نوشتاری CSS در خط بصورت زیر است:
```
<p style="محل قرارگیری ویزگی های css">این یک پاراگراف است</p>
```
همانطور که در قطعه کد بالا مشاهده می کنید ما از یک برچسب p برای ایجاد پاراگراف استفاده کردیم. حال برای اینکه یک سری از ویژگی ها را با استفاده از CSS به آن اضافه کنیم، پس از نوشتن قسمت ابتدایی برچسب و ایجاد یک فاصله، از کلمه کلیدی style استفاده کردیم. این کلمه به این معنی است که ویزگی های مربوط به CSS در درون آن نوشته شده و مرورگر ملزم به اجرای آن در برچسب مورد نظر خواهد بود.

سبک داخلی (Internal style sheet)

این راهکار حرفه ای تر از راهکار قبلی یعنی استفاده از CSS درخط می باشد. در این راه برای استفاده از ویژگی های CSS کافیست برچسب style درون برچسب head قرار گیرد تا بتوان از ویژگی های آن در سند HTML بهره برد.
```
<html>
<head>
<style>
محل قرار گیری ویژگی های css
</style>
</head>
<body>
</body>
</html>
```
تمام ویژگی های CSS با قرار گیری در برچسب style در مرورگر اجرا خواهد شد.

سبک خارجی (External style sheet)

این راهکار نسبت به راه هایی که توضیحات آن گذشت حرفه‌ای‌تر بوده و بیشتر مورد استفاده قرار می گیرد. شما نیز برای اینکه بصورت حرفه ای بتوانید کدنویسی کنید از این راه برای ایجاد ویزگی های CSS استفاده کنید.

برچسب یکطرفه link

یکی از موارد استفاده از این برچسب فراخوانی فایل CSS‌خارجی می باشد. برای اینکه بتوان یک فایل CSS را در سند HTML فراخوانی کرد به صورت زیر عمل می کنیم.
```
<html>
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>
</html>
```
- rel : این کلمه مخفف relationship می باشد. از آن برای مشخص کردن ارتباط بین سند فعلی و سند لینک شده استفاده می شود.
- type : مشخص کننده نوع فایل لینک شده می باشد.
- href : نشانی فایل لینک شده را مشخص می کند.
ساخت سند CSS

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. (در اینجا من نام project را انتخاب می کنم که ار قبل ساخته بودیم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند CSS شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام style را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، style را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

پس از ساخت سند، آماده می شویم برای یادگیری چگونگی کار با ویژگی های CSS که در جلسه بعدی شرح داده خواهد شد.
۱۳۹۵-۰۹-۲۵
آموزش طراحی وب – جلسه هفتم – جدول
با جلسه هفتم از آموزش طراحی وب با موضوع جدول در خدمت شما دوستان هستیم. اگر این اولین بار است که این آموزش را مطالعه می کنید بهتر است جلسات قبل را نیز مرور کنید.

برچسب دوطرفه table

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

بصورت زیر نوشته می شود:
```
<table></table>
```
نکته: هر جدول از یک یا چند سطر (row) و سلول (cell) تشکیل شده است.

برچسب دوطرفه th

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

بصورت زیر نوشته می شود:
```
<table>
<th>عنوان</th>
</table>
```
برچسب دو طرفه tr

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

بصورت زیر نوشته می شود:
```
<table>
<tr>ایجاد یک سطر</tr>
</table>
```
برچسب دوطرفه td

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

بصورت زیر نوشته می شود:
```
<table>
<td>ایجاد یک سلول</td>
</table>
```
تا به اینجا جدول ما به صورت زیر در آمده است:
```
<table>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>
```
اما اگر این جدول را در خروجی مشاهده کنید می بینید که ساختار یک جدول پیاده شده اما هیچ مرزی سطرها و سلول ها را از یکدیگر جدا نمی کند.

حال در اینجا باید از یک ویژگی به نام border استفاده شود تا مرزبندی برچسب ها از یکدیگر مشخص شود. این کار خوانایی یک جدول را بیشتر خواهد کرد. هرچه مقدار پس از مساوی که روبروی border قرار می گیرد بیشتر باشد قطر مرز میان سلولها نیز بیشتر خواهد شد. البته برای ایجاد این ویژگی ها می توان از CSS نیز استفاده کرد.
```
<table border=1>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>
```
خروجی:

برچسب دوطرفه thead

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

اولین برچسب گروهی thead بوده که مربوط به عناوین می باشد. به وسیله این برچسب میتوان مدیریت بهتری بر روی برچسب های th داشت. برای مثال می توان با نوشتن یک ویژگی CSS آن را برای تمام برچسب های th اعمال کرد.
```
<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>
```
برچسب دوطرفه tbody

کارکرد این برچسب نیز مانند thead است با این تفاوت که از tbody برای اثرگذاری بر روی بدنه و محتوای داخلی یک جدول استفاده می شود.
```
<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
</table>
```
برچسب دوطرفه tfoot

توضیح این برچسب نیز مانند دو برچسب قبلی بوده با این تفاوت که ردیف یا سطر انتهایی جدول را تحت تاثیر قرار می دهد.
```
<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
<tfoot>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tfoot>
</table>
```
نکته: برچسب های گروهی thead, tbody و tfoot زمانی قابلیت تاثیرگذاری دارند که از ویژگی ها CSS استفاده شود وگرنه هیچ تاثیری نخواهند داشت.

برچسب دوطرفه caption

معمولا از این برچسب برای توضیح کوتاه درباره محتوای قرار گرفته در جدول استفاده می شود. طریقه استفاده از این برچسب قرارگیری آن در ابتدای جدول بصورت زیر است:
```
<table border=1>
<caption>شرح جدول</caption>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>
```
برچسب table دارای ویژگی های مختلفی است که باعث ایجاد قابلیت هایی از جمله تغییر رنگ، اندازه و… در آن می شود البته این ویژگی ها در نسخه‌ی HTML5 پشتیبانی نمی شود. آن هم به این علت که این ویزگی ها می تواند با استفاده از CSS در جدول اعمال شود. برای همین سعی می کنم تا در جلسات مربوط به CSS درباره آنها توضیح دهم.
۱۳۹۵-۰۹-۱۸
آموزش طراحی وب – جلسه ششم – فرم قسمت 2
در جلسه ششم از سری آموزش های طراحی وب با قسمت دوم از فرم ها در خدمت شما دوستان عزیز خواهیم بود. لطفا اگر جلسات پیش را مطالعه نکرده اید حتما اینکار را انجام دهید.

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

برچسب دوطرفه select

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

بصورت زیر نوشته می شود:
```
<select></select>
```
نکته: برچسب select به تنهایی کارایی ندارد بلکه باید همراه با برچسب زیر مجموعه خود استفاده شود.

برچسب دوطرفه option

option برچسب زیرمجموعه select می باشد. برای اینکه گزینه های مورد نظر خودمان را ایجاد کنیم از آن استفاده می کنیم.

بصورت زیر نوشته می شود:
```
<option>قرار گیری محتوا</option>
```
حال برای اینکه موارد متعددی را به برچسب انتخاب خود اضافه کنیم کافیست بصورت زیر عمل کرده و نتیجه را در خروجی مشاهده کنید. ما میخواهیم ۳ مورد در فیلد کشویی به نمایش در بیاید.

مثال:
```
<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option>گزینه سوم</option>
</select>
```
خروجی در مرورگر:

برای اینکه بخواهیم میان چندین مورد از option ها یکی به صورت پیشفرض انتخاب شده باشد، کافیست از ویژگی selected در برچسب option موردنظر استفاده کنیم.

بصورت زیر نوشته می شود:
```
<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option selected>گزینه سوم</option>
</select>
```
خروجی در مرورگر:

برچسب دوطرفه textarea

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

بصورت زیر نوشته می شود:
```
<textarea></textarea>
```
خروجی در مرورگر:

برچسب ناحیه متنی نیز مانند دیگر برچسب ها از ویژگی های متعددی برخوردار است که برخی از آنها را شرح می دهم.

ویژگی cols و rows

برای اینکه بتوانیم بر روی اندازه ناحیه متنی مدیریت بهتری داشته باشیم می توانیم از دو ویژگی برای تغییر سطر و ستون استفاده کنیم. این دو ویژگی با نام های cols و rows در دسترس بوده و با قرار دادن آنها در برچسب textarea این امکان برای تغییر اندازه فراهم خواهد شد.

بصورت زیر نوشته می شود:
```
<textarea cols="50" rows="20"></textarea>
```
rows مشخص کننده تعداد سطرها و cols مشخص کننده تعداد ستون هاست.

ویژگی maxlength

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

بصورت زیر نوشته می شود:
```
<textarea maxlength="50"></textarea>
```
تعداد این ویژگی ها به مراتب بیشتر از مواردی است که در این دو جلسه در فرم ها گذشت. اما با این حال شما برای یادگیری کافیست پس از موارد شاخص و مهم که در این سری از آموزش ها به آنها پرداخته شد، با یادگیری جزییات به اطلاعات خود در این زمینه اضافه کنید.
۱۳۹۵-۰۸-۲۴

بلاگ

ایجاد متاباکس وردپرس

ویژگی شناوری چیست

در سند HTML چه خبر؟!

در سند CSS چه خبر؟!

افزونه Search & Replace

افزونه SSL Insecure Content Fixer

بکارگیری کوئری در mysql برای جایگزینی نشانی

IDE چیست؟

Apache NetBeans

NetBeans IDE

Brackets

Sublime Text

JetBrains PhpStorm

notepad++

komodo IDE

ID و CLASS در استایل نویسی

تعریف ID و CLASS در برچسب

تعریف ID و CLASS در سند CSS

انتخابگر

ویژگی و مقدار

CSS چیست

سبک در خط (Inline style)

سبک داخلی (Internal style sheet)

سبک خارجی (External style sheet)

برچسب یکطرفه link

ساخت سند CSS

برچسب دوطرفه table

برچسب دوطرفه th

برچسب دو طرفه tr

برچسب دوطرفه td

برچسب دوطرفه thead

برچسب دوطرفه tbody

برچسب دوطرفه tfoot

برچسب دوطرفه caption

برچسب دوطرفه select

برچسب دوطرفه option

برچسب دوطرفه textarea

ویژگی cols و rows

ویژگی maxlength