ایجاد صفحه تماس با ما بدون استفاده از افزونه در وردپرس

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

ایجاد صفحه تماس با ما به صورت مستقل :

ابتدا یک صفحه با پسوند php در هاست خود ایجاد کنید (برای مثال از نام contact-page.php استفاده می‌کنیم).  کد زیر را در فایل قرار دهید:

<?php
/*
Template Name: نام قالب
*/
?>

این کد نام قالب را تعیین می‌کند.

پس از آن قالب بندی صفحه را تعیین می‌کنیم. برای این کار کد زیر را در ادامه قبلی قرار دهید:

<?php get_header() ?>

<div id="container">
<div id="content">
<?php the_post() ?>
<div id="post-<?php the_ID() ?>">
<div>
</div><!-- .entry-content ->
</div><!-- .post-->
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar() ?>
<?php get_footer() ?>

ایجاد فرم

در قذم بعدی لازم است، مراحل طراحی فرم را انجام دهید. در اینجا یک فرم ساده به عنوان نمونه قرار داده شده است. این کد باید در فایل فرم تماس با ما (contact-page.php) و در تگ div مربوط به محتوا جای گیرد:

 

<?php get_header(); ?>
<div id="container">
<div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<div>
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div>
<p>با تشکر، ایمیل شما با موفقیت ارسال شد</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p>متاسفم، خطایی رخ داده است لطفا مجددا سعی نمایید<p>
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul>
<li>
<label for="contactName">نام شما:</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />
<?php if($nameError != '') { ?>
<span><?=$nameError;?></span>
<?php } ?>
</li>

<li>
<label for="email">ایمیل شما:</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" />
<?php if($emailError != '') { ?>
<span><?=$emailError;?></span>
<?php } ?>
</li>

<li><label for="commentsText">پیغام:</label>
<textarea name="comments" id="commentsText" rows="20" cols="30"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span><?=$commentError;?></span>
<?php } ?>
</li>

<li>
<input type="submit" value="ارسال ایمیل"></input>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="ارسال ایمیل" />
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- .post -->

<?php endwhile; endif; ?>
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

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

برای انجام این کار، کد زیر را قبل از تابع <?php get_header(); ?>  قرار دهید:

<?php
/*فرم تماس با ما
*/
?>

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'لطفا نام خود را وارد کنید';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '') {
$emailError = 'لطفا آدرس ایمیل خود را وارد کنید.';
$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'متاسفانه آدرس ایمیل وارد شده صحیح نمی باشد';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'لطفا پیغام خود را وارد کنید';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = 'پیغام از طرف '.$name;
$body = "فرستنده: $name \n\nایمیل : $email \n\nپیغام: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>

موفق باشید!

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

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

افزودن ویژگی “تصویر شاخص” به قالب وردپرس

در اولین اقدام نیاز است که ویژگی تصویر شاخص را به قالب خود اضافه کنید. برای این کار کد زیر را به فایل فانکشن قالب(functions.php) اضافه کنید:

<?php
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 260, 220, true ); // تعیین طول و عرض تصویر
}
?>

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

 

تعریف اسلایدر برای وردپرس

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

register_sidebar(array(
'name' => 'right',
'before_widget' => '<div class="blockr"><div class="pat1">',
'after_widget' => '</div>',
'before_title' => '<span>',
'after_title' => '</span></div><div class="iconb"><img src="/wp-content/themes/GoldMovie.ver2/images/topp.png"></div><br/><br/><br/>',
));

نمایش اسلایدر

در قدم بعدی لازم است کد نمایش اسلایدر را در جای مناسب(محلی که تمایل دارید، اسلایدر به نمایش گذاشته شود – برای مثال فایل header.php) قرار دهید:

<div class="footer_box">
<div id='holder' style='display:none;'>
<ul id="text_ads">
<?php
$my_query = new WP_Query('showposts=10&cat=0'); // 10 اسلایدر نمایش داده خواهد شد
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class='objImgFrame' >
<a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="image" target="_blank"> /* عنوان مطلب*/
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( array(212,64) );
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.png" />'; // عکس مطلب
}
?></a>
<a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="title" target="_blank"><?php the_title(); ?></a> // عنوان
</li>
<?php endwhile; ?><?php wp_reset_query(); ?>
</ul>
<div class="srcoll_nav">
<a href"#" id="leftNav" >&nbsp; </a>
<a href"#" id="rightNav" >&nbsp; </a>
</div>
</div>
</div>

پس از افزودن کد خواهید دید که اسلایدر بدون هیچ ترتیب و جلوه‌ای نمایش داده شده‌اند. برای حل مشکل فایل‌های موجود در این لینک را بر روی هاست خود آپلود کرده و در فایل هدر فراخوانی کنید. برای این کار از کدهایی شبیه به کد زیر استفاده کنید و به جای “http://wploop.ir/jquery.min.js” آدرس محل فایل‌های آپلود شده را بنویسید:

<script type="text/javascript" src="http://wploop.ir/jquery.min.js"></script>

علاوه‌براین کد زیر به فایل استایل (style.css) قالب خود اضافه کنید:

body {

font: 11px tahoma;
margin: 0;
padding: 0;
background: #ccc;
color:#000;
}

ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
}

div.footer_box {
width:980px;
float:right;
margin-right:50px;

position:relative
}
ul#text_ads {
width:980px;
float:right;
margin:10px -5px 10px 0;
}
.objImgFrame {
float: right;
width: 228px;
height: 200px;
margin: 0px 15px 0px 0px;
border-radius: 5px;
box-shadow: 0px 0px 8px #000;
}

.objImgFrame .image {

width:227px;
height:146px;
float:right;
}
.objImgFrame .image img {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px 5px 0 0;
width:227px;
height:146px;
float:right;
}.objImgFrame .image img:hover {
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.objImgFrame .title {
margin-top:8px;
text-align:center;
width:215px;
float:right;
color:#000;
font-weight:bold;
}
.objImgFrame .descript {
width:210px;
float:right;
margin:5px 5px 0 0;
color:#000;
font-weight:normal;
}
.objImgFrame a {
transition-property:color;
transition-duration:1s;
-moz-transition-property:color;
-moz-transition-duration:1s;
-webkit-transition-property:color;
-webkit-transition-duration:1s;
-o-transition-property:color;
-o-transition-duration:1s;
}

.simple_slider_hover {
cursor:pointer;
cursor:hand
}
.simple_slider_disabled {
opacity : 0.2;
filter: alpha(opacity=20);
zoom: 1;
}
#leftNav {
width:23px;
height:85px;
background:url(images/text_ads_arrow.png) no-repeat 0 0;
position:absolute;
top:65px;
left:-40px;
}
#leftNav:hover {
background-position:0 -85px;
}
#rightNav {
width:23px;
height:85px;
background:url(images/text_ads_arrow.png) no-repeat -23px 0;
position:absolute;
top:65px;
right:-30px;
}
#rightNav:hover {
background-position:-23px -85px;
}

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

موفق باشید!

ایجاد و بهینه سازی فایل robots.txt

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

ضرورت ایجاد فایل robots.txt

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

اگر هنوز آن را نساخته‌اید، یک فایل با نام robots.txt در ریشه هاست سایت ایجاد کنید. یعنی مسیر فایل به شکل “www.yourdomain.com/robots.txt” خواهد بود.

پیکربندی و ساخت فایل robots.txt

ساخت و نوشتن کد در این فایل بسیار ساده است. برای این کار در خط اول، عبارت User-Agent را برای معرفی ربات‌های مورد نظر خود وارد کنید. در مقابل آن نام ربات‌های در نظر گرفته شده را بنویسید(برای مثال  Googlebot , Bingbot و…). در صورت وارد کردن “*” ، این فایل تمام ربات‌های متصل شونده به سایت را مورد خطاب قرار خواهد داد.

در خطوط بعد با استفاده از دستورات Allow و Disallow، به ترتیب صفحاتی که تمایل به ایندکس آن‌ها داریم و صفحاتی که تمایل به ایندکس آن‌ها نداریم را معرفی می‌کنیم. برای مثال یک مورد ساده برای محتویات فایل ربات به صورت زیر است:

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

سئو و بهینه سازی فایل robots.txt با معرفی نقشه سایت

معمولا آدرس نقشه سایت به صورت اتوماتیک توسط افزونه‌های سئو سایت به فایل robots.txt اضافه می‌شود. در غیر این صورت برای اضافه کردن آن به صورت دستی می‌توانید از کد زیر استفاده کنید(به جای “http://www.example.com/sitemap.xml” آدرس نقشه سایت را درج کنید):

Sitemap: http://www.example.com/sitemap.xml

یک فایل robots.txt ایده‌آل به چه صورت است؟

کد زیر یک فایل robots.txt ساده را نشان می‌دهد که اکثر سایت‌ها نیز به همین صورت فایل روبات خود را پیکربندی می‌کنند:

User-agent: *
Disallow:

Sitemap: http://www.example.com/sitemap.xml

این کد ساده به ربات‌ها اجازه دسترسی به تمام لینک‌های معرفی شده در نقشه سایت را می‎‌دهد.

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

User-Agent: *
Allow: /?display=wide
Allow: /wp-content/uploads/
Disallow: /wp-content/plugins/
Disallow: /readme.html
Disallow: /refer/

Sitemap: http://www.sample.com/post-sitemap.xml
Sitemap: http://www.sample.com/page-sitemap.xml
Sitemap: http://www.sample.com/deals-sitemap.xml
Sitemap: http://www.sample.com/hosting-sitemap.xml

موفق باشید!

نمایش تصویر لودینگ پیش از ورود به سایت وردپرس

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

آموزش نمایش تصویر لودینگ پیش از ورود به سایت

کد زیر را به فایل استایل قالب وردپرس(style.css) اضافه کنید. این کد آدرس و جایگاه تصویر لودینگ را مشخص می‌کند:

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/loading.gif') center center no-repeat #f8f8f8;
}

در این کد تصویر لودینگ در آدرس ” images/loading.gif” سایت فراخوانی شده است. پس یا تصویر مورد نظرتان را در این آدرس ذخیره کنید و یا آدرس را مناسب با محل قرارگیری تصویر لودینگ تغییر دهید.

برای دانلود یک مورد تصویر لودینگ کلیک کنید. 

در مرحله بعد کد زیر را به فایل هدر قالب (header.php) پس از تگ <body> اضافه کنید:

<div class="loader"></div>

پس از آن لارم است جی‌کوئری را فراخوانی کنید. در صورتی که فایل این کتابخانه را پیش‌تر به هاست خود اضافه کرده‌اید آدرس آن را جایگزین آدرس این کد کرده و آن را بین تگ‌های <head> و </head> موجود در فایل هدر قرار دهید:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>

مراحل فعالسازی تصویر لودینگ به پایان رسید. اکنون می‌توانید با ورود به سایت خود، نتیجه را مشاهده کنید. در صورتی که تصویر لودینگ عمل نکرد، صفحه را به وسیله‌ی کلیدهای Ctrl + F5 رفرش کنید.

این تصویر به صورتی ساده در نظر گرفته شد تا صرفا ساختار کدهای “نمایش محتوا قبل از لود سایت” معرفی گردد. شما می‌توانید محتویات تابع <div class=”loader”> را به سلیقه خود ویرایش کرده و تغییر دهید.

موفق باشید!

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

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

 چرا متاباکس ایجاد کنیم؟

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

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

گاهی ماهیت یک متاباکس در مورد یک مطلب و نوشته کاربردی نداشته و نویسنده آن را خالی و بدون تغییر باقی می‌گذارد. برای معرفی این موقعیت به وردپرس کد زیر را به فایل فانکشن(function.php) اضافه کنید:

// تابع برگرداندن مقدار فیلد ها
function wpt_get_custom_field( $value ) {
global $post;

$custom_field = get_post_meta( $post->ID, $value, true );
if ( !empty( $custom_field ) )
return is_array( $custom_field ) ? stripslashes_deep( $custom_field ) : stripslashes( wp_kses_decode_entities( $custom_field ) );

return false;
}

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

// ایجاد متاباکس
function wpt_add_custom_meta_box() {
add_meta_box( 'wpt-meta-box', __( 'متاباکس آزمایشی حلقه وردپرس', 'textdomain' ), 'wpt_meta_box_output', 'post', 'normal', 'high' ); // ایجاد متاباکس برای نوشته‌‌ها
add_meta_box( 'wpt-meta-box', __( 'متاباکس آزمایشی حلقه وردپرس', 'textdomain' ), 'wpt_meta_box_output', 'page', 'normal', 'high' ); // ایجاد متاباکس برای برگه‌ها
}
add_action( 'add_meta_boxes', 'wpt_add_custom_meta_box' );

پس از ذخیره فایل فانکشن شاهد ایجاد تبی مانند تصویر زیر به صفحه ایجاد برگه/نوشته خواهید بود. در این کد کلمه normal باعث می‌شود تب متاباکس در زیر فیلد درج نوشته قرار گیرد. اگر تمایل دارید این موقعیت به سایدبار سمت چپ وردپرس منتقل شود(مانند متاباکس وضعیت، دسته‌بندی و…) این مقدار را به side تغییر دهید. کلمه high نیز به معنای اولویت‌بندی متاباکس است که باعث نمایش تب آن به عنوان اولین بالاترین تب می‌شود.

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

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

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

// افزودن فیلد به متاباکس
function wpt_meta_box_output( $post ) {
// ساخت فیلدها
wp_nonce_field( 'my_wpt_meta_box_nonce', 'wpt_meta_box_nonce' ); ?>

<p>
<label for="wpt_textfield"><?php _e( 'عنوان', 'textdomain' ); ?>:</label>
<input type="text" name="wpt_textfield" id="wpt_textfield" value="<?php echo wpt_get_custom_field( 'wpt_textfield' ); ?>" size="50" />
</p>

<p>
<label for="wpt_textarea"><?php _e( 'متن', 'textdomain' ); ?>:</label><br />
<textarea name="wpt_textarea" id="wpt_textarea" cols="60" rows="4"><?php echo wpt_get_custom_field( 'wpt_textarea' ); ?></textarea>
</p>

<?php
}

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

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

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

در مرحله بعد قصد داریم محتویات متاباکس های هر نوشته/برگه را به عنوان یک ویژگی آن در نظر بگیریم تا در هنگام نمایش نوشته/برگه، محتویات فیلدهای متاباکس نمایش داده شوند. برای این کار کد زیر را به فایل فانکشن اضافه کنید:

// ذخیره مقدار فیلد ها
function wpt_meta_box_save( $post_id ) {
// جلوگیری از اجرای اسکریپت زمانی که وردپرس در حال ذخیره خودکار است
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

// بررسی فعلی متاباکس
if( !isset( $_POST['wpt_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['wpt_meta_box_nonce'], 'my_wpt_meta_box_nonce' ) ) return;

// جلوگیری از اجرای اسکریپت زمانی که کاربر اجازه ویرایش ندارد
if( !current_user_can( 'edit_post' ) ) return;

// ذخیره فیلد عنوان
if( isset( $_POST['wpt_textfield'] ) )
update_post_meta( $post_id, 'wpt_textfield', esc_attr( $_POST['wpt_textfield'] ) );

// ذخیره فیلد متن
if( isset( $_POST['wpt_textarea'] ) )
update_post_meta( $post_id, 'wpt_textarea', esc_attr( $_POST['wpt_textarea'] ) );
}
add_action( 'save_post', 'wpt_meta_box_save' );

در مرحله آخر کافیست به فایل نمایش مطلب/برگه قالب خود دستور دهیم، محتویات متاباکس را در کدام موقعیت از صفحه نمایش دهد. برای این کار کد زیر را در جای مناسب از قالب(فایل single.php و یا فایل سایدبار مرتبط با صفحات برگه و نوشته) قرار دهید. نام فیلد مورد نظر را جایگزین عبارت id کنید:

get_post_meta( get_the_ID(), ‘id’, true )

موفق باشید!

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

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

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

کد نمایش مطالب به صورت تصادفی:

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


<li><h2>Random Post</h2>
<ul>
<?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php } ?>
</ul>
</li>

در این کد تعداد پست‌های نمایش داده شده، ۵ عدد در نظر گرفته شده است و با توجه به نیاز خود می‌توانید این قسمت را تغییر دهید. (numberposts=5)

پس از ذخیره اطلاعات شاهد نمایش مطالب به صورت تصادفی خواهید بود. مثل همیشه با داشتن اندک مهارت و دانشی از کدنویسی css قادر خواهید بود طراحی و فرم این بخش را مناسب با قالب خود تغییر دهید.

موفق باشید!

آموزش نمایش آخرین مطالب ارسال شده وردپرس

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

آموزش نمایش آخرین مطالب ارسال شده وردپرس

در صورتی که قالب شما از قابلیت تصویر شاخص پشتیبانی نمی‌کند، کد زیر را در فایل فانکشن قالب(functions,php) کپی کنید:

add_theme_support('post-thumbnails');
if ( function_exists('add_theme_support') ) {add_theme_support('post-thumbnails');}

در غیر این صورت به مرحله بعد بروید.

کد نمایش آخرین مطالب ارسال شده وردپرس

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

<ul>
<?php
global $post;
$myposts = get_posts(array('numberposts' => 5, 'offset' => 0,'post_status'=>'publish'));
foreach($myposts as $post) :
setup_postdata($post);
?>
<li>
<?php
if(has_post_thumbnail()) {
echo '<a href="'.get_permalink().'">';
echo get_the_post_thumbnail($post->ID, array(50,50) );
echo '</a>';
} ?>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
</li>
<?php endforeach; ?>
<?php wp_reset_query(); ?>
</ul>

توجه داشته باشید که در کد بالا، array(50,50) ، تعیین کننده‌ی سایز طول و عرض تصویر شاخص شما بوده و با تغییر این مقدار می‌توانید تصاویر شاخص را در سایزهای مختلف به نمایش بگذارید. ضمنا مقدار ۵ موجود در کد numberposts’ => 5 ، تعیین کننده‌ی تعداد پست‌هایی است که توسط این پست نمایش داده می‌شود.

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

موفق باشید!

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

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

ساخت ابزارک نمایش نوشته‌ها براساس دسته‌بندی وردپرس

در ابتدا لازم است، نام و مشخصات ابزارک را به قالب خود معرفی کنید. بنابراین کد زیر را به فایل فانکشن(functions.php) خود اضافه کنید:

class CategoryPosts extends WP_Widget {

function CategoryPosts() {
$widget_ops = array('classname' => 'cat-post-widget', 'description' => __('نمایش نوشته های مربوط به یک دسته ')); // توضیحات ابزارک
$this->WP_Widget('category-posts', __('نمایش نوشته‌ها براساس دسته بندی'), $widget_ops); // نام ابزارک
}


بعد از این باید تابعی را به وردپرس معرفی کنیم که مطالب یک دسته را برای ما پیدا کند. برای این کار کد زیر را نیز به فایل فانکشن اضافه می‌کنیم:

function widget($args, $instance) {
global $post;
$post_old = $post; // ذخیره مطلب

extract( $args );

$sizes = get_option('mkrdip_cat_post_thumb_sizes');

// اگر عنوان وارد نشده باشد از نام دسته استفاده می‌شود
if( !$instance["title"] ) {
$category_info = get_category($instance["cat"]);
$instance["title"] = $category_info->name;
}

$valid_sort_orders = array('date', 'title', 'comment_count', 'rand');
if ( in_array($instance['sort_by'], $valid_sort_orders) ) {
$sort_by = $instance['sort_by'];
$sort_order = (bool) isset( $instance['asc_sort_order'] ) ? 'ASC' : 'DESC';
} else {
// بخش زیر برای مرتب کردن مطالب است که در اینجا براساس تاریخ و به صورت نزولی تعیین شده است
$sort_by = 'date';
$sort_order = 'DESC';
}

// آرایه ای از اطلاعات مطالب را بر می گرداند
$cat_posts = new WP_Query(
"showposts=" . $instance["num"] .
"&cat=" . $instance["cat"] .
"&orderby=" . $sort_by .
"&order=" . $sort_order
);

// تعیین تعداد حروف توظیحات هر پست
$new_excerpt_length = create_function('$length', "return " . $instance["excerpt_length"] . ";");
if ( $instance["excerpt_length"] > 0 )
add_filter('excerpt_length', $new_excerpt_length);

echo $before_widget;

// عنوان ابزارک
echo $before_title;
if( isset( $instance["title_link"] ) )
echo '<a href="' . get_category_link($instance["cat"]) . '">' . $instance["title"] . '</a>';
else
echo $instance["title"];
echo $after_title;

// لیست مطالب
echo "<ul>\n";

while ( $cat_posts->have_posts() )
{
$cat_posts->the_post();
?>
<li class="cat-post-item">
<a class="post-title" href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

<?php if ( isset( $instance['date'] ) ) : ?>
<p class="post-date"><?php the_time("j M Y"); ?></p>
<?php endif; ?>

<?php
if (
function_exists('the_post_thumbnail') &&
current_theme_supports("post-thumbnails") &&
isset( $instance["thumb"] ) &&
has_post_thumbnail()
) :
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'cat_post_thumb_size'.$this->id ); ?>
</a>
<?php endif; ?>

<?php if ( isset( $instance['excerpt'] ) ) : ?>
<?php the_excerpt(); ?>
<?php endif; ?>

<?php if ( isset( $instance['comment_num'] ) ) : ?>
<p class="comment-num">(<?php comments_number(); ?>)</p>
<?php endif; ?>
</li>
<?php
}

echo "</ul>\n";

echo $after_widget;

remove_filter('excerpt_length', $new_excerpt_length);

wp_reset_postdata();

}

function update($new_instance, $old_instance) {
$sizes = get_option('mkrdip_cat_post_thumb_sizes');

if ( !$sizes ) {
$sizes = array();
}

$sizes[$this->id] = array($new_instance['thumb_w'], $new_instance['thumb_h']);
update_option('mkrdip_cat_post_thumb_sizes', $sizes);

return $new_instance;
}


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

function form($instance) {
$instance = wp_parse_args( ( array ) $instance, array(
'title' => __( '' ),
'cat' => __( '' ),
'num' => __( '' ),
'sort_by' => __( '' ),
'asc_sort_order' => __( '' ),
'title_link' => __( '' ),
'excerpt' => __( '' ),
'excerpt_length' => __( '' ),
'comment_num' => __( '' ),
'date' => __( '' ),
'thumb' => __( '' ),
'thumb_w' => __( '' ),
'thumb_h' => __( '' )
) );

$title = $instance['title'];
$cat = $instance['cat'];
$num = $instance['num'];
$sort_by = $instance['sort_by'];
$asc_sort_order = $instance['asc_sort_order'];
$title_link = $instance['title_link'];
$excerpt = $instance['excerpt'];
$excerpt_length = $instance['excerpt_length'];
$comment_num = $instance['comment_num'];
$date = $instance['date'];
$thumb = $instance['thumb'];
$thumb_w = $instance['thumb_w'];
$thumb_h = $instance['thumb_h'];

?>
<p>
<label for="<?php echo $this->get_field_id("title"); ?>">
<?php _e( 'عنوان' ); ?>:
<input class="widefat" id="<?php echo $this->get_field_id("title"); ?>" name="<?php echo $this->get_field_name("title"); ?>" type="text" value="<?php echo esc_attr($instance["title"]); ?>" />
</label>
</p>

<p>
<label>
<?php _e( 'دسته بندی' ); ?>:
<?php wp_dropdown_categories( array( 'name' => $this->get_field_name("cat"), 'selected' => $instance["cat"] ) ); ?>
</label>
</p>

<p>
<label for="<?php echo $this->get_field_id("num"); ?>">
<?php _e('تعداد مطالب برای نمایش'); ?>:
<input style="text-align: center;" id="<?php echo $this->get_field_id("num"); ?>" name="<?php echo $this->get_field_name("num"); ?>" type="text" value="<?php echo absint($instance["num"]); ?>" size='3' />
</label>
</p>

<p>
<label for="<?php echo $this->get_field_id("excerpt"); ?>">
<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id("excerpt"); ?>" name="<?php echo $this->get_field_name("excerpt"); ?>"<?php checked( (bool) $instance["excerpt"], true ); ?> />
<?php _e( 'نمایش چکیده مطالب' ); ?>
</label>
</p>

<p>
<label for="<?php echo $this->get_field_id("excerpt_length"); ?>">
<?php _e( 'طول چکیده:' ); ?>
</label>
<input style="text-align: center;" type="text" id="<?php echo $this->get_field_id("excerpt_length"); ?>" name="<?php echo $this->get_field_name("excerpt_length"); ?>" value="<?php echo $instance["excerpt_length"]; ?>" size="3" />
</p>

<p>
<label for="<?php echo $this->get_field_id("comment_num"); ?>">
<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id("comment_num"); ?>" name="<?php echo $this->get_field_name("comment_num"); ?>"<?php checked( (bool) $instance["comment_num"], true ); ?> />
<?php _e( 'نمایش تعداد دیدگاه ها' ); ?>
</label>
</p>

<p>
<label for="<?php echo $this->get_field_id("date"); ?>">
<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id("date"); ?>" name="<?php echo $this->get_field_name("date"); ?>"<?php checked( (bool) $instance["date"], true ); ?> />
<?php _e( 'نمایش تاریخ مطلب' ); ?>
</label>
</p>

<?php if ( function_exists('the_post_thumbnail') && current_theme_supports("post-thumbnails") ) : ?>
<p>
<label for="<?php echo $this->get_field_id("thumb"); ?>">
<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id("thumb"); ?>" name="<?php echo $this->get_field_name("thumb"); ?>"<?php checked( (bool) $instance["thumb"], true ); ?> />
<?php _e( 'نمایش تصویر شاخص' ); ?>
</label>
</p>
<p>
<label>
<?php _e('اندازه تصویر شاخص'); ?>:<br />
<label for="<?php echo $this->get_field_id("thumb_w"); ?>">
عرض: <input class="widefat" style="width:30%;" type="text" id="<?php echo $this->get_field_id("thumb_w"); ?>" name="<?php echo $this->get_field_name("thumb_w"); ?>" value="<?php echo $instance["thumb_w"]; ?>" />
</label>

<label for="<?php echo $this->get_field_id("thumb_h"); ?>">
ارتفاع: <input class="widefat" style="width:30%;" type="text" id="<?php echo $this->get_field_id("thumb_h"); ?>" name="<?php echo $this->get_field_name("thumb_h"); ?>" value="<?php echo $instance["thumb_h"]; ?>" />
</label>
</label>
</p>
<?php endif; ?>

<?php

}

}

add_action( 'widgets_init', create_function('', 'return register_widget("CategoryPosts");') );


تغییرات را ذخیره کنید و از طریق بخش ابزارک‌ها اقدام به تست آن کنید. علاوه براین به چند کد نویسی ساده css قادر خواهید بود ساختار ابزارک را با قالب خود تناسب دهید. آموزش مربوط به ساخت ابزارک نمایش نوشته‌ها براساس دسته‌بندی وردپرس  در همین‌جا به پایان می‌رسد. امیدوارم این مطلب در بهبود سایت شما موثر بوده باشد.

موفق باشید…

غیرفعال کردن بروزرسانی خودکار در وردپرس

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

از طریق کنترل پنل یا FTP وارد فایل منیجر هاست خود شده و در صفحه‌ی اول، فایل تنظیمات وردپرس (wp-config.php) را انتخاب و کد زیر را به محتویات آن اضافه کنید:

define( 'WP_AUTO_UPDATE_CORE', false );

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

 

روش دیگر غیرفعال کردن بروزرسانی خودکار  وردپرس، استفاده از افزونه “Disable Updates Manager plugin” است.

پس از نصب افزونه به مسیر تنظیمات»Disable Updates Manager بروید تا به منوی تنظیمات این افزونه دسترسی داشته باشید.

غیرفعال کردن بروزرسانی خودکار در وردپرس

غیرفعال کردن بروزرسانی خودکار در وردپرس