آموزش افزونه yoast seo – قسمت دوم


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

آموزش افزونه yoast seo

افزونه yoast seo

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

ابزارها

درقسمت ابزارها سه زیربخش را مشاهده می کنید که شامل “درون ریزی و برون بری” ،”ویرایشگر فایل” و “ویرایشگر گروهی” است.

درون ریزی و برون بری

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

ویرایشگرفایل

در این قسمت شما می توانید دو فایل robots.text و htaccess را ویرایش کنید.

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

User-Agent* :
Allow: /wp-content/uploads/
Disallow: /wp-content/plugins/

اگر بخواهید همه ی موتورهای جستجو سایت شما را ایندکس کنند باید جلوی user-agent  علامت ستاره بگذارید. درغیر این صورت می توانید فقط نام موتور جستجو مورد نظرتان را بنویسید.

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

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

ویرایشگر گروهی

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

 

کار با افزونه yoast seo

 

میز فرمان جست و جو

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

 

بهینه سازی محتوا با افزونه  Yoast SEO

برای نوشتن محتوا در وردپرس باید به قسمت “نوشته ها” رفته و گزینه ی “نوشته جدید” را انتخاب کنید، سپس محتوا را ایجاد کنید. در قسمت پایین می توانید  با استفاده از امکانات موجود  متن خود را برای موتورهای جستجو بهینه کنید. در ادامه به آموزش امکانات موجود در افزونه yoast seo می پرداریم. پس ما را همراهی کنید.

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

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

 

بهینه سازی محتوا با yoast seo

 

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

توضیحات متا

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

نکته : نوار موجود در زیر عنوان و توضیحات متا باید به رنگ سبز دربیاید.

 

بهینه سازی محتوا با yoast seo

 

کلید واژه کانونی

بخش بعدی کلیدواژه کانونی یا همان کلمه ی کلیدی محتوا است. پرکردن این قسمت باعث  درخشش چشمگیر سئو مطلب مورد نظر می شود.

کار با افزونه yoast seo

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

سئو و بهینه سازی مطالب وردپرس

 

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

دایره سبز به معنی قابل قبول بودن می‌باشد.
دایره نارنجی/ زرد به این معنی است که جای بهبود دارد.
اگر دایره قرمز باشد یعنی مشکلات زیادی وجود دارد.
دایره خاکستری به این معنی است که هیچ اطلاعاتی در خصوص سئو مطلب‌تان یا خوانایی در دسترس نیست.

seo با افزونه yoast seo

 

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

نوشته آموزش افزونه yoast seo – قسمت دوم اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

پنهان و نمایان کردن عناصر در jQuery – درس شانزدهم


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

آموزش قواعد دستوری جی کوئری

پنهان و نمایان کردن عناصر در جی کوئری

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

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

 

متد data متد removedata

 

افکت های جی کوئری

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

استفاده از متدهای  show()و  hide()

افکت های  hide و show نیز برای پنهان و نمایان کردن عناصر در jQuery به کار می رود. شما می توانید عناصر داخل صفحه وب را با متدهای  hide و show مخفی و نمایش کنید.

نکته: اگر می خواهید عمل مخفی کردن و نمایش دادن با مدت زمانی مشخص انجام شود می توانید یک زمان مشخص مانند ۱۰۰۰ میلی ثانیه در قسمت hide(1000) قرار دهید. این پارامتر بر اساس میلی ثانیه می باشد.

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

 

<html>
<head>
<script type="text/javascript" src="http://www.spadan.net/jquery.js"> </script>
<script type="text/javascript">
 $(document).ready(function(){
  	$("#hide").click(function(){
    		$("p").hide(1000);
  	});
  	$("#show").click(function(){
    		$("p").show(1000);
  	});
});
</script>
</head>
<body dir="rtl" style="text-align: center">
<p> "Hide" کلیک کنید، برای پنهان روی دکمه  "show"برای نمایش روی دکمه .</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

 

استفاده از متد toggle

یکی دیگر از متدهای که در کتابخانه جی کوئری استفاده زیادی از آن می شود متد toggle() است که برای پنهان و نمایان کردن عناصر در jQuery یا قسمتی از صفحه به کار می رود.

نکته: متد toggle()  دو عمل hide()  و show() را با هم انجام می دهد.

توضیح کد: همانطور که ملاحظه می فرمایید، عنصری یا آیدی button وقتی روی آن کلیک شد رویداد toggle() برای آیدی p1  اتفاق می افتد و مخفی یا نمایش داده می شود.

<html>
 <head>
 <script type="text/javascript" src="http://www.spadan.net/jquery.js"> </script>
 <script type="text/javascript">
  $(document).ready(function () {
 	$("# button").click(function(){
 		$("#p1").toggle();
 });
 });
 </script>
 </head>
<body>
<p> نحوه تغییر وضعیت عنصر</p>
 <button id=" button" type="button">Toggle</button>
</body>
</html>

 

در آموزش بعدی می پردازیم به محو کردن عناصر در jQuery . با ما همراه باشید.

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

موفق باشید 🙂

نوشته پنهان و نمایان کردن عناصر در jQuery – درس شانزدهم اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

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


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

نمایش پربازدیدترین ها در وردپرس بدون افزونه

نمایش پربازدیدترین عنوان ها

نمایش مطالب محبوب در یک سایت از اهمیت ویژه ای برخوردار است و برای کاربران جذاب است. بنابراین معمولاً سایت ها قسمتی از وب سایت خود را که بیشتر در معرض دید است، به نمایش پربازدیدترین عنوان ها اختصاص می دهند. نمایش پربازدیدترین عنوان ها در وردپرس به دو روش صورت می گیرد.

۱- نمایش پربازدیدترین عنوان ها با افزونه
۲- نمایش پربازیدترین عنوان ها بدون افزونه

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

برای نمایش پربازدیدترین ها باید سه قطعه کد که در ادامه به آنها می پردازیم را در سه فایل functions.php  و single.php و sidebar.php  قراردهید. البته فایل sidebar.php بسته به اینکه پربازدیدترین های شما کجا قرار دارد متفاوت است.

نکته : برای نمایش پربازدیدترین ها یک قسمت از سایت خود را که دید بهتری دارد (مثلاً سایدبار) انتخاب نمایید.

ابتدا در فایل functions.php قطعه کد زیر را قرار دهید.

<?php function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "بدون بازدید";
    }
    return $count;
}
// function to count views
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
} ?>

 

قطعه کد زیر را در بالای فایل   single.php  و داخل حلقه قرار دهید. این کد تعداد بازدید از هر مطلب را نشان می دهد.

<?php setPostViews(get_the_ID()); ?>

کد حلقه به صورت زیر است:

ابتدای حلقه

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

انتهای حلقه

<?PHP endwhile; ?>
 <?PHP endif; ?>

برای درک بهتر یک نمونه کد صفحه single  را برای شما قرار دادیم که به صورت زیر است :

<div class="single-contents">
         <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
         <?php setPostViews(get_the_ID()); // baraye por bazdidtarinha ?> 
          <div class="single-content">
          <p id="title"><?php the_title() ?></p>
         	<?php the_content();?>
         </div>
          <?php endwhile; ?>
          <?php endif; ?>
</div>

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

<?php query_posts('meta_key=post_views_count&showposts=4&orderby=meta_value_num&order=DESC');
if (have_posts()) : while (have_posts()) : the_post(); ?>

کد زیر را نیز باید بعد از قسمت پربازدیدترین ها قرار بدهید.

<?php endwhile; endif; wp_reset_query(); ?>

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

<div class="sidebar-box">
	<div class="sidebar-header">
			<div class="sidebar-text"><a href="#">پربازدیدترین ها</a></div>
	</div>
	<div class="content">
	<?php    query_posts('meta_key=post_views_count&showposts=3&orderby=meta_value_num&order=DESC');
    if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="best-sellers"><?php the_post_thumbnail('most-view'); ?>
	<div class="saller-txt"><a href="<?PHP the_permalink() ?>"><?php the_excerpt();?></a></div>
	</div>	
	<?php endwhile; endif; wp_reset_query(); ?>
	</div>	
</div>

 

خروجی در تصویر زیر نمایش داده شده است.

نمایش پر بازدیدترین عنوان ها

 

نتیجه گیری

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

نوشته نمایش پربازدید ترین عنوان ها در وردپرس بدون افزونه اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

خرید رپورتاژ آگهی و بک لینک


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

خرید رپورتاژ آگهی و بک لینک

رپورتاژ آگهی و بک لینک

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

بهتر است بدانید در سال ۲۰۱۷ میلادی خرید رپورتاژ آگهی و بک لینک یکی از موثرترین عوامل شناخته شدن صفحات وب سایت توسط موتور جستجوگر گول شناخته شد .در ابتدا توضیحات مختصری درمورد رپورتاژ و بک لینک برای شما همراهان عزیز ارائه میکنم تا به درک شما از این موضوع کمک کند.

 

رپورتاژ آگهی و بک لینک چیست

رپورتاژ آگهی

رپورتاژ آگهی: برگرفته از کلمه reportage به معنای گزارش می باشد که بصورت یک مقاله شامل ۲۰۰تا۵۰۰ کلمه و چند عکس, با محتوای هدفمند جهت تبلیغ در قالب پست در سایت ها مخصوصا سایت های پربازدید مانند سایت های خبری به کار برده می شود. ­­­

بک لینک

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

 

خرید رپورتاژ آگهی و بک لینک

خرید رپورتاژ و بک لینک

 

خرید رپورتاژ آگهی

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

روش اول :

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

روش دوم :

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

 

خرید بک لینک

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

خرید بک لینک یا رپورتاژ

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

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

با توجه به نکات ذکر شده ارجحیت خریدن رپورتاژ آگهی و بک لینک تنها با سنجیدن نیاز ها , میزان زمان و بازدهی مدنظر شما مشخص خواهد شد و نمی توان با قاطعیت بیان کرد که روش برتر برای تبلیغات خرید بک لینک می باشد یا رپورتاژ آگهی.

 

نتیجه گیری:

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

نوشته خرید رپورتاژ آگهی و بک لینک اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

طراحی قالب فروشگاهی


پوسته آرکی | قالب دکوراسیون داخلی آرکی | سایت طراحی داخلی و اینتریور دیزاین | Archi Interior Design
قالب سایت معماری داخلی

ساین فوق العاده دکوراسیون

قالب دکوراسیون داخلی آرکی | قالب آرچی | معماری | طراحی داخلی | Archi Interior Design

قالب وردپرس دکوراسیون آرکی Archi

پوسته فوق العاده زیبا و محبوب و پر فروش دکوراسیون داخلی و طراحی داخلی Archi Interior Design مخصوص وب سایت های شرکتی خصوصا شرکت های ساختمانی و عمرانی و طراحی داخلی بهترین انتخاب برای داشتن وب سایتی بهینه، زیبا و مدرن می باشد!

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

قالب وردپرس آرکی | Archi

 

قالب Archi یک قالب وردپرس زیبا و خاص برای طراحی داخلی است. این قالب مخصوص کارهای طراحی داخلی، اتاق نشیمن، طراحی نما، طراحی آشپزخانه، طراحی اتاق خواب، طراحی ناهار خوری و غیره است. با کمک قالب آرکی می توانید یک وب سایت بسیار زیبا و مدرن برای خود طراحی کنید. این قالب افزونه های مختلفی همچون ریولوشن اسلایدر، ویژوال کامپوزر، ووکامرس، WPML، فرم تماس ۷ و غیره را دارا می باشد که در طراحی هرچه سریع تر و بهتر قالب به شما کمک خواهند کرد. در زیر برخی از ویژگی های این قالب شرکتی را ذکر کرده ایم.

ویژگی های اصلی قالب آرکی

  • کاملا واکنش گرا و ریسپانسیو
  • سازگار یا وردپرس ورژن ۴٫۵+
  • دارای ۸ صفحه اصلی متفاوت
  • دارای ۴ صفحه فرود مختلف
  • دارای چهار استایل متفاوت برای صفحه “Comming Soon “
  • دارای دو استایل روشن و تیره
  • دارای افزونه ویژوال کامپوزر
  • دارای افزونه ریولوشن اسلایدر
  • پنل مدیریتی کارآمد
  • دارای افزونه ووکامرس
  • دارای رنگ بندی نامحدود
  • پشتیبانی از افزونه WPML
  • دارای افکت های پارالاکس برای تصاویر و ویدیوها
  • بهینه سازی شده برای سئو
  • دارای طرح بندی های متفاوت برای نمونه کارها
  • دارای افزونه فرم تماس ۷
  • پشتیبانی از مرورگرهای مختلف
  • دارای قابلیت ساخت قالب تک صفحه

نکته : کل قالب از ابتدا بازنویسی شده و قالب براساس Child-Theme آماده و فراهم شده است.



Source link

modal ها در بوت استرپ


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

modal ها در بوت استرپ

مدال در بوت استرپ

مدال یک پنجره  محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود.  برای ساخت modal نیاز به کدهای html  ، css وjava script  دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت اسپادان همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم.

ساخت modal در بوت استرپ

برای ایجاد مدال در بوت استرپ به دو فایل bootstrap.css وbootstrap.js نیاز دارید. شما می توانید این فایل ها را از سایت بوت استرپ دانلود نمایید و در کدهایتان آن ها را فراخوانی کنید. فایل bootstrap.css را در پوشه ای به نام css و فایل bootstrap.js را در پوشه ای به نام js قرار دهید. نحوه ی فراخوانی این دو فایل را می توانید در کد زیر مشاهده نمایید. یک فایل index.html  بسازید و قطعه کد زیر را در آن قرار دهید.

<!DOCTYPE html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1 ">
		<title>bootstrap-18</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">   
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>      
    </div> 
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

 

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

modal در بوت استرپ

قسمت Trigger

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

data-toggle="modal"  
data-target="#mymodal"

مقدار data-toggle  نوع دکمه را مشخص می کند که از نوع مدال باشد و مقدار data-target  هم شناسه یا آیدی مدال موردنظر است.

قسمت  Modal

div  مربوط به مدال موردنظر باید یک id  داشته باشد که مقدار این  id  باید با مقدار  data-target یکسان باشد. اگر بخواهیم در یک صفحه چندین مدال بسازیم باید برای هر مدال یک آیدی منحصر به فرد در نظر بگیریم تا با مشکل مواجه نشویم.

برای فعال کردن و ایجاد فوکوس روی مدال باید به div  موردنظر کلاس modal  را بدهیم  ، کلاس fade  هم برای قرار دادن افکت بر روی باز و بسته شدن مدال است که می توانید آن را حذف نمایید.

قسمت Modal content

خصوصیت  data-dismiss=”modal” باعث می شود مدال مورد نظر بسته شود و کلاس  close هم برای استایل دهی به دکمه  استفاده می شود. کلاس های modal-header، modal-body و modal-footer به ترتیب برای استایل دهی به قسمت هدر مدال، بدنه ی مدال و فوتر آن استفاده می شوند. بقیه ی کلاس ها نیز برای استایل دهی قسمت های مختلف مدال استفاده می شود. درصورتی که بخواهید استایل مدال خود را سفارشی سازید باید یک فایل style.css بسازید و لینک آن را در ایندکس بعد از لینک bootstrap.css قرار دهید و کدهای خود را در  style.css قرار دهید.

نتیجه گیری

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

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

نوشته modal ها در بوت استرپ اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

رسم اشکال در css


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

css Shapes

اشکال در css

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

 

رسم اشکال در css

آموزش رسم اشکال در css

 

روشهای رسم اشکال در css

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

– Border-radius
– Border
– Transform
– Clip-path
– Box-shadow

در ادامه هر کدام را با ذکر مثال توضیح می دهیم.

 

Border-radius

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

 

دایره:

.circle{
	height: 250px;
	width: 250px;
	border-radius:50%;
	background-color:#29DBC7;
}

 

Border

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

 

مثلث رو  به بالا:

#triangle-up {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #888888;
}

به این ترتیب با تغییر border ها می توانید مثلث رو به پایین ، رو به راست و رو به چپ ایجاد نمایید.

 

ذوزنقه:

.KeepRightLeft{
	width: 0;
	height: 0;
	border-top:100px solid transparent;
	border-right:100px solid orange;
	border-bottom:100px solid transparent;
	border-left:100px solid blue;
}

 

شش ضلعی:

#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

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

 

Transform

اگر می خواهید برای اشکال در css چرخش ایجاد نمایید، ویژگی transform با حالت rotate سودمند خواهد بود. مثلا با چرخاندن یک مربع، لوزی ایجاد می گردد.

یعنی:

.diamond{
	width: 150px;
	height: 150px;
	background-color: #0AECD0;
	transform: rotate(45deg);
	margin-left:40px;
	margin-top: 40px;
}

 

متوازی الاضلاع:

#parallelogram {
   width: 130px; 
   height: 75px;
   background: pink;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

 

نوار نشان:

رسم اشکال در css

#badge-ribbon {
position:relative;
background:#888888;
height:100px;
width:100px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
#badge-ribbon:before,#badge-ribbon:after {
content:'';
position:absolute;
border-bottom:70px solid #888888;
border-left:40px solid transparent;
border-right:40px solid transparent;
top:70px;
left:-10px;
-webkit-transform:rotate(-140deg);
-moz-transform:rotate(-140deg);
-ms-transform:rotate(-140deg);
-o-transform:rotate(-140deg);
}
#badge-ribbon:after {
left:auto;
right:-10px;
-webkit-transform:rotate(140deg);
-moz-transform:rotate(140deg);
-ms-transform:rotate(140deg);
-o-transform:rotate(140deg);
}

 

قلب:

#heart {
position:relative;
width:100px;
height:90px;
}
#heart:before,#heart:after {
position:absolute;
content:"";
left:50px;
top:0;
width:50px;
height:80px;
background:#888888;
-moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
#heart:after {
left:0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}

 

بی نهایت:

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}

#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

 

ذره بین ( علامت جستجو ) :

#magnifying-glass
{
 font-size: 10em; /* This controls the size. */
 display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid red;
 position: relative;
 border-radius: 0.35em;
}
#magnifying-glass::before
{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: red;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
}

 

Clip-path

ویژگی clip-path به همراه سه تابع ()inset(), polygon و ()ellipse شکل‌های متنوع‌تری طراحی می‌شود. اعداد ورودی نشان‌دهنده هر گوشه شکل هستند. مثلا برای مثلث ، ۳ گوشه و سه ورودی نیاز است.

 

ستاره :

.star{
	width: 250px;
	height: 250px;
	background-color:#A80F43;
	background-size:cover;
	-webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

 

Box-shadow

ویژگی box-shadow برای اضافه کردن سایه به اشکال در css استفاده می‌شود.

 

هلال ماه:

.moon{
	width: 250px;
	height: 250px;
	border-radius:50%;
	box-shadow: 45px 45px 0 0 #32172C;

}

 

مهاجم فضایی:

رسم شکل در css

#space-invader{

  box-shadow:
    ۰ ۰ ۰ ۱em red,
    ۰ ۱em 0 1em red,
    -۲٫۵em 1.5em 0 .5em red,
    ۲٫۵em 1.5em 0 .5em red,
    -۳em -3em 0 0 red,
    ۳em -3em 0 0 red,
    -۲em -2em 0 0 red,
    ۲em -2em 0 0 red,
    -۳em -1em 0 0 red,
    -۲em -1em 0 0 red,
    ۲em -1em 0 0 red,
    ۳em -1em 0 0 red,
    -۴em 0 0 0 red,
    -۳em 0 0 0 red,
    ۳em 0 0 0 red,
    ۴em 0 0 0 red,
    -۵em 1em 0 0 red,
    -۴em 1em 0 0 red,
    ۴em 1em 0 0 red,
    ۵em 1em 0 0 red,
    -۵em 2em 0 0 red,
    ۵em 2em 0 0 red,
    -۵em 3em 0 0 red,
    -۳em 3em 0 0 red,
    ۳em 3em 0 0 red,
    ۵em 3em 0 0 red,
    -۲em 4em 0 0 red,
    -۱em 4em 0 0 red,
    ۱em 4em 0 0 red,
    ۲em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }

 

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

نوشته رسم اشکال در css اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

افزونه سئو Yoast SEO Premium 7.0.1


افزونه سئو Yoast SEO Premium 7.0.1

Yoast SEO یکی از محبوب ترین و حرفه ای ترین افزونه ها در زمینه سئو وردپرس و بهینه سازی مطالب ، محتوا و محصولات ووکامرس می باشد که از آن می توانید در وب سایت های وردپرسی خود استفاده کنید. این افزونه تا کنون در بیش از ۳ میلیون وب سایت وردپرسی نصب و راه اندازی شده است. این افزونه با ارائه راهنمایی ها ، پیشنهاد ها و راهکار های مناسب می تواند رتبه سئوی وب سایت شما در موتور های جستجو را بهبود بخشد . هم اکنون می توانید نسخه حرفه ای (Premium) افزونه سئو وردپرس را به همراه افزونه های جانبی “سئوی پیشرفته ووکامرس WooCommerce SEO” ، “سئوی پیشرفته اخبار News SEO” و همچنین “سئوی پیشرفته ویدئو” را از پرشین اسکریپت به صورت رایگان دریافت کنید.

 

یاست سئو 7.0.1

امکانات افزونه فارسی سئو وردپرس نسخه حرفه ای Yoast SEO Premium نسخه ۷٫۰٫۱

  • کاملا فارسی
  • وجود افزونه های جانبی سئوی ووکامرس ، سئوی حرفه ای اخبار، سئوی حرفه ای ویدئو
  • سازگاری با وردپرس ۴٫۹ و ووکامرس سری ۳
  • ایجاد خودکار نقشه سایت
  • قابلیت معرفی گوگل وبمستر
  • پیشنهادات کاربردی در زمینه بهبود نتایج مطالب وب سایت
  • آنالیز محتوای وب سایت
  • و…

نوشته افزونه سئو Yoast SEO Premium 7.0.1 اولین بار در طراحی قالب فروشگاهی. پدیدار شد.



Source link

طریقه ی ایجاد منو و زیرمنو


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

menu-css-html

نحوه­ ی ایجاد منو و زیر منو با  Html و Css

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

در مرحله ی اول باید کد های html  مربوط به منوی اصلی در یک فایل با پسوند html نوشته و ذخیره شود. برای نوشتن منو در html   تگ های ul و li مورد استفاده قرار می گیرد .

<!DOCTYPE html>
<head>
    <title>DropDown Menu with HTML and CSS</title>
</head>
<body>
       <nav>
           <ul>
<li><a href="#">طراحی سایت  </a></li>
<li><a href="#">سئوسایت </a></li>
<li><a href="#">طراحی فروشگاه اینترنتی </a></li>
<li><a href="#">درباره اسپادان</a></li>
<li><a href="#">تماس با اسپادان</a></li>		
</ul>
                  </nav>
</body>
</html>

کد بالا یک فهرست توسط ul ایجاد می کند و آیتم­ های منو در درون این فهرست و در تگ li قرار می گیرند. کد های بالا لیستی از منوی ساده ی عمودی فاقد زیر منو را نمایش می دهد که شامل ۵ منوی اصلی می باشد.

نحوه­ ی ایجاد منو و زیر منو

تا اینجا تنها منو های اصلی طراحی شده است , حال برای این که منو هایی با زیر منو داشته باشیم باید درون آیتم دلخواه خود که می خواهیم زیر منو داشته باشد یک بلاک ul و li اضافه کنیم. برای مثال می خواهیم به منوی ” طراحی سایت ” خود ۳ زیر منو اضافه کنیم. به کد های زیر توجه کنید.

<li><a href="#"> طراحی سایت </a>
<ul>
<li><a href="#">طراحی سایت اصفهان </a></li>
<li><a href="#"> طراحی سایت در اصفهان </a></li>
<li><a href="#"> طراحی سایت حرفه ای </a></li>
</ul>
</li>

با توجه به کد های بالا برای اضافه کردن زیر منو به منوی اصلی “طراحی سایت” باید یک بلاک کامل ul  و li به تگ li آن اضافه کنیم. به همین ترتیب می توانید به سایر منو ها هم زیر منو اضافه کنید.

<nav>
           <ul>
 <li><a href="#"> طراحی سایت </a>
<ul>
<li><a href="#">طراحی سایت اصفهان </a></li>
<li><a href="#"> طراحی سایت در اصفهان </a></li>
<li><a href="#"> طراحی سایت حرفه ای </a></li>
</ul>
</li>
 <li><a href="#"> سئو سایت </a>
<ul>
<li><a href="#">سئو سایت اصفهان </a></li>
<li><a href="#"> سئو سایت در اصفهان </a></li>
<li><a href="#"> سئوداخلی سایت</a></li>
</ul>
</li>
<li><a href="#">طراحی فروشگاه اینترنتی </a></li>
<li><a href="#">درباره اسپادان</a></li>
<li><a href="#">تماس با اسپادان</a></li>
</ul>
</nav>

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

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

ul li ul
{
Display:none;
}

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

ul li:hover ul
}
display: block;
{

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

نکته ی مهم دیگر استفاده از Position:relative می باشد. که قرار دادن Position در حالت relative باعث می شود که محل قرار گیری هر زیر منو با توجه به منوی راس آن باشد.

ul
{
Position: relative;
}

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

ul li
{
Display:inline-block;
}

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

ul
{
	list-style:none;
}

li
{
	float: right;
	width: auto;
	position: relative;
	height: 40px;
}

ul li
{
; float: right
;  font-family:'yekan'
 ; display: inline-block
}

  ul li a
{
	padding:5px 18px 0px 10px;
	font: 15px 'Yekan';
   ; font-weight:bold
	color:#323232;
	max-height:33px;
	margin-top:3px;
    line-height:0px;
	display: inline-block;
}

  ul li ul
{
	Display:none;
   ; padding: 0
    margin:5px;
    position: absolute;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 150px;
 ;  Z-index:1

    margin-right:-10px;
}

ul li ul li
{
  width:150px;
  height:auto;
  text-align:center;
  padding:10px;
  background-color:#dcedc8;
  border:1px solid #BDBDBD;
	opacity: .85;
}

ul li ul li:hover
{
  width:150px
  border:1px solid #ffc107
  background-color:#ffc107
}

  ul li:hover ul
{
   display: block;
  ; opacity: 1
  ; visibility: visible
}

  ul li ul li a 
{
   color: #000000;
   width: 150px;
	text-align: center;
	padding:15px;
}

menu_submenu

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

نوشته طریقه ی ایجاد منو و زیرمنو اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

پیشخوان در وردپرس


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

آموزش پیشخوان در وردپرس

آموزش پیشخوان در وردپرس

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

برای ورود به وردپرس ابتدا  وارد مرورگر خود شوید و آدرس سایت خود را همراه wp-admin در قسمت نوار آدرس وارد نمایید. بعد از این که نام کاربری و رمز عبور خود را در صفحه­ ی ورود وارد کردید می­ توانید وارد وردپرس شوید. شما با استفاده از وردپرس می­ توانید سایت خود را مدیریت کنید و درون سایت محتوا بگذارید.

ورود به وردپرس

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

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

 پیشخوان در وردپرس

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

ایجاد نوشته

افزودن برگه ی درباره ما

مدیریت فهرست ها

مدیریت دیدگاه ها

مشاهده سایت

انتخاب قالب برای نمایش سایت

آموزش کار با پیشخوان وردپرس

 

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

در این مقاله درباره پیشخوان در وردپرس صحبت شد. از توجه شما بسیار سپاس­گذاریم. در ویدئو زیر می توانید به صورت عملی کار با پیشخوان وردپرس را مشاهده نمایید. برای آگاهی از جدیدترین آموزش های تیم طراحی سایت اسپادان می توانید به  کانال @webyar_net بپیوندید.

 

نوشته پیشخوان در وردپرس اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

..................................................................................طراحی وب سایت , سئو وب سایت , طراحی قالب وردپرس , فروش بک لینک , فروش رپورتاژ.................................................................................. رد کردن

آفلاین

در حال حاضر نیستیم. لطفا پیام خود را ارسال کنید, در اولین فرصت رسیدگی میکنیم. با تشکر : تیم پشتیبانی اسپادان

هر سولی دارید بپرسید.

شروع چت