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

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

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

ابتدا یک صفحه با پسوند 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;
}

} ?>

موفق باشید!

ایجاد پسوردهای راندوم قوی در وردپرس با افزونه Simple User Password Generator

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

راه‌اندازی و کار با افزونه Simple User Password Generator :

با ورود به بخش افزونه ها » افزودن و جستجوی عبارت “Simple User Password Generator” ، می توانید اقدام به نصب این افزونه کنید. علاوه‌بر این جهت راه‌اندازی به روش دستی از این لینک استفاده کنید.

ایجاد پسوردهای راندوم قوی در وردپرس با افزونه Simple User Password Generator

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

علاوه‌براین، Simple User Password Generator  از کاربرانی که به تازگی وارد اکانت خود می‌شوند درخواست می‌کند پسورد خود را بروزرسانی کنند، که این به یادآوری کاربر/نویسنده در این زمنیه و افزایش امنیت سایت کمک خواهد کرد.

ایجاد پسوردهای راندوم قوی در وردپرس با افزونه Simple User Password Generator

در صورتی که سایت شما دارای نویسنده و یا کاربر زیادی باشد که از طریق فرم وردپرس اقدام به ثبت‌نام می‌کنند، قطعا تعیین پسورد قدرتمند برای حفظ امنیت سایت ضروری خواهد بود و افزونه Simple User Password Generator ساده‌ترین و راحت‌ترین روش انجام این کار است.

موفق باشید!

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

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

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

در اولین اقدام نیاز است که ویژگی تصویر شاخص را به قالب خود اضافه کنید. برای این کار کد زیر را به فایل فانکشن قالب(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

موفق باشید!

درخواست تایید در هنگام انتشار پست در وردپرس با افزونه Publisher Confirmation

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

جلوگیری از منتشر شدن اتفاقی پست با افزونه Publisher Confirmation

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

درخواست تایید در هنگام انتشار پست در وردپرس با افزونه Publisher Confirmation

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

تا کنون بیش از دو سال از بروزرسانی این افزونه گذشته است، ولی عملکرد آن تا نسخه ۳٫۸٫۱ وردپرس بدون مشکل بوده و بدون نگرانی می‌توانید از آن بهره ببرید.

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

// This is the confirmation message that will appear.
$c_message = 'Are you SURE you want to publish this post?';

function confirm_publish(){

global $c_message;
echo '<script type="text/javascript"><!--
var publish = document.getElementById("publish");
if (publish !== null) publish.onclick = function(){
return confirm("'.$c_message.'");
};
// --></script>';
}
add_action('admin_footer', 'confirm_publish');

موفق باشید!

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

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

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

کد زیر را به فایل استایل قالب وردپرس(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 )

موفق باشید!

آموزش تغییر سایز فونت در نوشته‌های وردپرس با افزونه TinyMCE Advanced

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

راه‌اندازی و کار با TinyMCE Advanced :

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

این افزونه یک لیست کامل و بی‌نقص از ابزار نگارش را در اختیار شما قرار می‌دهد. جهت اضافه کردن قابلیت تغییر سایز نوشته به ابزار نوشتار وردپرس خود در پیشخوان وردپرس به تنظیمات رفته و گزینه TinyMCE advanced را بزنید.

آموزش تغییر سایز فونت در نوشته‌های وردپرس با افزونه TinyMCE Advanced

آموزش تغییر سایز فونت در نوشته‌های وردپرس با افزونه TinyMCE Advanced

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

آموزش تغییر سایز فونت در نوشته‌های وردپرس با افزونه TinyMCE Advanced

آموزش تغییر سایز فونت در نوشته‌های وردپرس با افزونه TinyMCE Advanced

در اینجا آموزش تغییر سایز فونت نوشته‌ها از سری مطالب دسته بندی “افزونه‌“های سایت حلقه وردپرس به پایان می‌رسد. در این مطلب به یک معرفی کوتاه و آموزش کار افزونه TinyMCE Advanced پرداختیم. برخی عقیده دارند استفاده از نوشته‌ها با سایزهای مختلف در سئوی وب‌سایت تاثیر دارد. امیدوارم این پست باعث جلب بازدیدکنند و موفقیت شما شود.

موفق باشید!

 

نمایش حرفه‌ای منبع خبر با افزونه Rootitr وردپرس

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

راه‌اندازی و کار با Rootitr:

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

 

در ادامه راه‌اندازی افزونه، کدهای زیر را متناسب با کد نویسی قالب خود در فایل نمایش دهنده اخبار قرار دهید. (برای مثال فایل single.php یا فایل sidebar.php قسمت اخبار)

نمایش روتیتر:

<?= get_rootitr('rootitr') ?>

نمایش منبع:

<?= get_rootitr('manba') ?>

نمایش نام گزارشگر:

<?= get_rootitr('gozaresh') ?>

نمایش نام تصویرگر:

<?= get_rootitr('axha') ?>

نمایش مرجع:

<?= get_rootitr('copy') ?>

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

<?php if (function_exists('get_rootitr')){ ?>
<h3><?= get_rootitr('rootitr') ?></h3>
<h1><?php the_title(); ?></h1>
<p><?php the_excerpt(); ?></p>
<small><?= get_rootitr('manba') ?></small>
<?php } ?>

تعیین جزئیات منبع خبر و نمایش آن در صفحه خبر:

پس از تعیین این موارد، فایل را ذخیره کنید و به قسمت ایجاد نوشته بروید. شاهد اضافه شدن تب جدیدی تحت عنوان جزئیات خواهید بود. در این قسمت با پر کردن هر فیلد و انتشار خبر، نوشته فیلد در مکانی که قبل تر در فایل single.php (یا sidebar.php یا index.php) قالب تعیین کرده‌اید، نمایش داده خواهد شد.

نمایش حرفه‌ای منبع خبر با افزونه Rootitr وردپرس

نمایش حرفه‌ای منبع خبر با افزونه Rootitr وردپرس

موفق باشید!