بویکا

هدر متحرک ریسپانسیو فقط با جی کوئری ( تنها آموزش فارسی spritely )

4 پست در این موضوع قرار دارد

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

نمونه آنلاین

مراحل کار :

1 – فایل به نام jquery.spritely-0.4.js ایجاد کنین و کدهای زیر رو عینا داخلش کپی کنین ! ( یا از اینجا دانلود کنید )


/*
* jQuery spritely 0.4
* http://spritely.net/
*
* Documentation:
* http://spritely.net/documentation/
*
* Copyright 2010, Peter Chater, Artlogic Media Ltd, http://www.artlogic.net/
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Change history:
* Version 0.4
* - add up/down for 'pan' method. <ricky.hewitt@artlogic.net>
* - added 'dir' option for Sprites. This means a Sprite can be played in reverse.
* - removed alert message regarding jQuery.draggable (now uses console.log, if available) <ricky.hewitt@artlogic.net>
* Version 0.3b
* - added lockTo method for locking sprites to background images. $('#sprite').lockTo('#background, {'left': 380, 'top': -60, 'bg_img_width': 1110});
* Version 0.2.1
* - animate function will stop cycling after play_frames has completed
* Version 0.2 beta
* - added isDraggable method (requires jquery-ui) $('#sprite').sprite().isDraggable({start: null, stop: function() {alert('Ouch! You dropped me!')});
* - sprites may be set to play a limited number of frames when instantiated, e.g. $('#sprite').sprite({fps: 9, no_of_frames: 3, play_frames: 30})
* - sprite speed may be controlled at any point by setting the frames-per-second $('#sprite').fps(20);
* - sprites with multiple rows of frames may have there 'state' changed, e.g. to make the second row of frames
* active, use: $('#sprite').spState(2); - to return to the first row, use $('#sprite').spState(1);
* - background element speed may be controlled at any point with .spSpeed(), e.g. $('#bg1').spSpeed(10)
* - background elements may be set to a depth where 100 is the viewer (up close) and 0 is the horizon, e.g.:
* $('#bg1').pan({fps: 30, speed: 2, dir: 'left', depth: 30});
* $('#bg2').pan({fps: 30, speed: 3, dir: 'left', depth: 70});
* relative speed of backgrounds may now be set in a single action with $('#bg1, #bg2').spRelSpeed(20);
* which will make elements closer to the horizon (lower depths) move slower than closer elements (higher depths)
*/
(function($) {
$._spritely = {
// shared methods and variables used by spritely plugin
animate: function(options) {
var el = $(options.el);
var el_id = el.attr('id');
options = $.extend(options, $._spritely.instances[el_id] || {});
if (options.play_frames && !$._spritely.instances[el_id]['remaining_frames']) {
$._spritely.instances[el_id]['remaining_frames'] = options.play_frames + 1;
}
if (options.type == 'sprite' && options.fps) {
var frames;
var animate = function(el) {
var w = options.width, h = options.height;
if (!frames) {
frames = [];
total = 0
for (var i = 0; i < options.no_of_frames; i ++) {
frames[frames.length] = (0 - total);
total += w;
}
}
if (options.rewind == true) {
if ($._spritely.instances[el_id]['current_frame'] <= 0) {
$._spritely.instances[el_id]['current_frame'] = frames.length - 1;
} else {
$._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] - 1;
};
} else {
if ($._spritely.instances[el_id]['current_frame'] >= frames.length - 1) {
$._spritely.instances[el_id]['current_frame'] = 0;
} else {
$._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] + 1;
}
}

var yPos = $._spritely.getBgY(el);
el.css('background-position', frames[$._spritely.instances[el_id]['current_frame']] + 'px ' + yPos);
if (options.bounce && options.bounce[0] > 0 && options.bounce[1] > 0) {
var ud = options.bounce[0]; // up-down
var lr = options.bounce[1]; // left-right
var ms = options.bounce[2]; // milliseconds
el
.animate({top: '+=' + ud + 'px', left: '-=' + lr + 'px'}, ms)
.animate({top: '-=' + ud + 'px', left: '+=' + lr + 'px'}, ms);
}
}
if ($._spritely.instances[el_id]['remaining_frames'] && $._spritely.instances[el_id]['remaining_frames'] > 0) {
$._spritely.instances[el_id]['remaining_frames'] --;
if ($._spritely.instances[el_id]['remaining_frames'] == 0) {
$._spritely.instances[el_id]['remaining_frames'] = -1;
delete $._spritely.instances[el_id]['remaining_frames'];
return;
} else {
animate(el);
}
} else if ($._spritely.instances[el_id]['remaining_frames'] != -1) {
animate(el);
}
} else if (options.type == 'pan') {
if (!$._spritely.instances[el_id]['_stopped']) {
if (options.dir == 'up') {
$._spritely.instances[el_id]['l'] = $._spritely.getBgX(el).replace('px', '');
$._spritely.instances[el_id]['t'] = ($._spritely.instances[el_id]['t'] - (options.speed || 1)) || 0;
}
else if (options.dir == 'down') {
$._spritely.instances[el_id]['l'] = $._spritely.getBgX(el).replace('px', '');
$._spritely.instances[el_id]['t'] = ($._spritely.instances[el_id]['t'] + (options.speed || 1)) || 0;
}
else if (options.dir == 'left') {
$._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] - (options.speed || 1)) || 0;
$._spritely.instances[el_id]['t'] = $._spritely.getBgY(el).replace('px', '');
} else {
$._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] + (options.speed || 1)) || 0;
$._spritely.instances[el_id]['t'] = $._spritely.getBgY(el).replace('px', '');
}
// When assembling the background-position string, care must be taken
// to ensure correct formatting.. <ricky.hewitt@artlogic.net>
var bg_left = $._spritely.instances[el_id]['l'].toString();
if (bg_left.indexOf('%') == -1) {
bg_left += 'px ';
} else { bg_left += ' '; }
var bg_top = $._spritely.instances[el_id]['t'].toString();
if (bg_top.indexOf('%') == -1) {
bg_top += 'px ';
} else { bg_top += ' '; }

$(el).css('background-position', bg_left + bg_top);
}
}
$._spritely.instances[el_id]['options'] = options;
window.setTimeout(function() {
$._spritely.animate(options);
}, parseInt(1000 / options.fps));
},
randomIntBetween: function(lower, higher) {
return parseInt(rand_no = Math.floor((higher - (lower - 1)) * Math.random()) + lower);
},
getBgY: function(el) {
if ($.browser.msie) {
// fixme - the background-position property does not work
// correctly in IE so we have to hack it here... Not ideal
// especially as $.browser is depricated
var bgY = $(el).css('background-position-y') || '0';
} else {
var bgY = ($(el).css('background-position') || ' ').split(' ')[1];
}
return bgY;
},
getBgX: function(el) {
if ($.browser.msie) {
// see note, above
var bgX = $(el).css('background-position-x') || '0';
} else {
var bgX = ($(el).css('background-position') || ' ').split(' ')[0];
}
return bgX;
},
get_rel_pos: function(pos, w) {
// return the position of an item relative to a background
// image of width given by w
var r = pos;
if (pos < 0) {
while (r < 0) {
r += w;
}
} else {
while (r > w) {
r -= w;
}
}
return r;
}
};
$.fn.extend({
spritely: function(options) {
var options = $.extend({
type: 'sprite',
do_once: false,
width: null,
height: null,
fps: 12,
no_of_frames: 2,
stop_after: null
}, options || {});
var el_id = $(this).attr('id');
if (!$._spritely.instances) {
$._spritely.instances = {};
}
if (!$._spritely.instances[el_id]) {
$._spritely.instances[el_id] = {current_frame: -1};
}
$._spritely.instances[el_id]['type'] = options.type;
$._spritely.instances[el_id]['depth'] = options.depth;
options.el = this;
options.width = options.width || $(this).width() || 100;
options.height = options.height || $(this).height() || 100;
var get_rate = function() {
return parseInt(1000 / options.fps);
}
if (!options.do_once) {
window.setTimeout(function() {
$._spritely.animate(options);
}, get_rate(options.fps));
} else {
$._spritely.animate(options);
}
return this; // so we can chain events
},
sprite: function(options) {
var options = $.extend({
type: 'sprite',
bounce: [0, 0, 1000] // up-down, left-right, milliseconds
}, options || {});
return $(this).spritely(options);
},
pan: function(options) {
var options = $.extend({
type: 'pan',
dir: 'left',
continuous: true,
speed: 1 // 1 pixel per frame
}, options || {});
return $(this).spritely(options);
},
flyToTap: function(options) {
var options = $.extend({
el_to_move: null,
type: 'moveToTap',
ms: 1000, // milliseconds
do_once: true
}, options || {});
if (options.el_to_move) {
$(options.el_to_move).active();
}
if ($._spritely.activeSprite) {
if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
$(this)[0].ontouchstart = function(e) {
var el_to_move = $._spritely.activeSprite;
var touch = e.touches[0];
var t = touch.pageY - (el_to_move.height() / 2);
var l = touch.pageX - (el_to_move.width() / 2);
el_to_move.animate({
top: t + 'px',
left: l + 'px'
}, 1000);
};
} else {
$(this).click(function(e) {
var el_to_move = $._spritely.activeSprite;
$(el_to_move).stop(true);
var w = el_to_move.width();
var h = el_to_move.height();
var l = e.pageX - (w / 2);
var t = e.pageY - (h / 2);
el_to_move.animate({
top: t + 'px',
left: l + 'px'
}, 1000);
});
}
}
return this;
},
// isDraggable requires jQuery ui
isDraggable: function(options) {
if ((!$(this).draggable)) {
//console.log('To use the isDraggable method you need to load jquery-ui.js');
return this;
}
var options = $.extend({
type: 'isDraggable',
start: null,
stop: null,
drag: null
}, options || {});
var el_id = $(this).attr('id');
$._spritely.instances[el_id].isDraggableOptions = options;
$(this).draggable({
start: function() {
var el_id = $(this).attr('id');
$._spritely.instances[el_id].stop_random = true;
$(this).stop(true);
if ($._spritely.instances[el_id].isDraggableOptions.start) {
$._spritely.instances[el_id].isDraggableOptions.start(this);
}
},
drag: options.drag,
stop: function() {
var el_id = $(this).attr('id');
$._spritely.instances[el_id].stop_random = false;
if ($._spritely.instances[el_id].isDraggableOptions.stop) {
$._spritely.instances[el_id].isDraggableOptions.stop(this);
}
}
});
return this;
},
active: function() {
// the active sprite
$._spritely.activeSprite = this;
return this;
},
activeonclick: function() {
// make this the active script if clicked...
var el = $(this);
if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
el[0].ontouchstart = function(e) {
$._spritely.activeSprite = el;
};
} else {
el.click(function(e) {
$._spritely.activeSprite = el;
});
}
return this;
},
spRandom: function(options) {
var options = $.extend({
top: 50,
left: 50,
right: 290,
bottom: 320,
speed: 4000,
pause: 0
}, options || {});
var el_id = $(this).attr('id');
if (!$._spritely.instances[el_id].stop_random) {
var r = $._spritely.randomIntBetween;
var t = r(options.top, options.bottom);
var l = r(options.left, options.right);
$('#' + el_id).animate({
top: t + 'px',
left: l + 'px'
}, options.speed)
}
window.setTimeout(function() {
$('#' + el_id).spRandom(options);
}, options.speed + options.pause)
return this;
},
makeAbsolute: function() {
// remove an element from its current position in the DOM and
// position it absolutely, appended to the body tag.
return this.each(function() {
var el = $(this);
var pos = el.position();
el.css({position: "absolute", marginLeft: 0, marginTop: 0, top: pos.top, left: pos.left })
.remove()
.appendTo("body");
});
},
spSet: function(prop_name, prop_value) {
var el_id = $(this).attr('id');
$._spritely.instances[el_id][prop_name] = prop_value;
return this;
},
spGet: function(prop_name, prop_value) {
var el_id = $(this).attr('id');
return $._spritely.instances[el_id][prop_name];
},
spStop: function(bool) {
$(this).each(function() {
var el_id = $(this).attr('id');
$._spritely.instances[el_id]['_last_fps'] = $(this).spGet('fps');
$._spritely.instances[el_id]['_stopped'] = true;
$._spritely.instances[el_id]['_stopped_f1'] = bool;
if ($._spritely.instances[el_id]['type'] == 'sprite') {
$(this).spSet('fps', 0);
}
if (bool) {
// set background image position to 0
var bp_top = $._spritely.getBgY($(this));
$(this).css('background-position', '0 ' + bp_top);
}
});
return this;
},
spStart: function() {
$(this).each(function() {
var el_id = $(this).attr('id');
var fps = $._spritely.instances[el_id]['_last_fps'] || 12;
$._spritely.instances[el_id]['_stopped'] = false;
if ($._spritely.instances[el_id]['type'] == 'sprite') {
$(this).spSet('fps', fps);
}
});
return this;
},
spToggle: function() {
var el_id = $(this).attr('id');
var stopped = $._spritely.instances[el_id]['_stopped'] || false;
var stopped_f1 = $._spritely.instances[el_id]['_stopped_f1'] || false;
if (stopped) {
$(this).spStart();
} else {
$(this).spStop(stopped_f1);
}
return this;
},
fps: function(fps) {
$(this).each(function() {
$(this).spSet('fps', fps);
});
return this;
},
spSpeed: function(speed) {
$(this).each(function() {
$(this).spSet('speed', speed);
});
return this;
},
spRelSpeed: function(speed) {
$(this).each(function() {
var rel_depth = $(this).spGet('depth') / 100;
$(this).spSet('speed', speed * rel_depth);
});
return this;
},
spChangeDir: function(dir) {
$(this).each(function() {
$(this).spSet('dir', dir);
});
return this;
},
spState: function(n) {
$(this).each(function() {
// change state of a sprite, where state is the vertical
// position of the background image (e.g. frames row)
var yPos = ((n - 1) * $(this).height()) + 'px';
var xPos = $._spritely.getBgX($(this));
var bp = xPos + ' -' + yPos;
$(this).css('background-position', bp);
});
return this;
},
lockTo: function(el, options) {
$(this).each(function() {
var el_id = $(this).attr('id');
$._spritely.instances[el_id]['locked_el'] = $(this);
$._spritely.instances[el_id]['lock_to'] = $(el);
$._spritely.instances[el_id]['lock_to_options'] = options;
window.setInterval(function() {
if ($._spritely.instances[el_id]['lock_to']) {
var locked_el = $._spritely.instances[el_id]['locked_el'];
var locked_to_el = $._spritely.instances[el_id]['lock_to'];
var locked_to_options = $._spritely.instances[el_id]['lock_to_options'];
var locked_to_el_w = locked_to_options.bg_img_width;
var locked_to_el_h = locked_to_el.height();
var locked_to_el_y = $._spritely.getBgY(locked_to_el);
var locked_to_el_x = $._spritely.getBgX(locked_to_el);
var el_l = (parseInt(locked_to_el_x) + parseInt(locked_to_options['left']));
var el_t = (parseInt(locked_to_el_y) + parseInt(locked_to_options['top']));
el_l = $._spritely.get_rel_pos(el_l, locked_to_el_w);
$(locked_el).css({
'top': el_t + 'px',
'left': el_l + 'px'
});
}
}, options.interval || 20);
});
return this;
}
})
})(jQuery);
// Stop IE6 re-loading background images continuously
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}

2 – فایلی jquery-1.3.2.min.js رو از این لینک دانلودکنید ! ( دقت داشته باشین که این نسخه رو حتما دانلود کنین )

3 – فولدری به نام scripts ایجاد کرده و دو فایل بالا رو داخلش کپی کنین .

4 – فولدری به نام images ایجاد کنید !

5 – فایلی به نام index.htm ایجاد کنید .

حالا رسیدیم به فراخوانی و کدها

استایل مورد نیاز رو پایین می نویسم بعد توضیحش می دم :


<style type="text/css">
#stage {
top: 0px;
left: 0px;
z-index: 100;
}
.stage {
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 259px;
overflow: hidden;
}
#bg {
background: #aedfe5 url(images/sky1.png) 0 0 repeat-x;
}
#clouds {
background: transparent url(images/cloud.png) 205px 12px repeat-x;
}
#clouds2 {
background: transparent url(images/cloud2.png) 325px 122px repeat-x;

}
.toppt{
color:#303030 !important;
position:absolute;
margin-left:43%;
z-index: 101;
text-align:center !important;
font-size:25px;
color:red !important;
}

</style>

توضیحات :

تگ #bg همون پس زمینمون هست . می تونین پس زمینه دلخواه خودتون رو داخل فولدر images که ساختین کپی کنین و از استایل زیر آدرس دهیش کنین

background: #aedfe5 url(images/sky1.png) 0 0 repeat-x;

1

background: #aedfe5 url(images/sky1.png) 0 0 repeat-x;

#clouds : با این تگ شما اولین المان رو که در تصویر حرکت می کنه رو استایل و آدرس دهی می کنین . باز هم از استایل زیر عکس خودتون رو دوباره آدرس دهی کنین

background: transparent url(images/cloud.png) 205px 12px repeat-x;

1

background: transparent url(images/cloud.png) 205px 12px repeat-x;

#clouds2 : با این تگ شما دومین المان رو که در تصویر حرکت می کنه رو استایل و آدرس دهی می کنین . باز هم از استایل زیر عکس خودتون رو دوباره آدرس دهی کنین

background: transparent url(images/cloud2.png) 325px 122px repeat-x;

1

background: transparent url(images/cloud2.png) 325px 122px repeat-x;

شما می تونین هر تعداد که خواستین المان اضافه کرده و آدرس دهی کنین .

.toppt : استایلی که باهاش متنتون رو روی عناصر بالا به عنوان لوگو تنظیم می کنین !

حالا دستور زیر رو بعد تگ </style> اضافه کنین . کدهای زیر دو فایل جی کوئری ساخته شده رو فراخوانی می کنه

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script><script src="scripts/jquery.spritely-0.4.js" type="text/javascript"></script>

1

2

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="scripts/jquery.spritely-0.4.js" type="text/javascript"></script>

سپس کد زیر رو پایین دو دستور بالا بنویسین


<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#logo').click(function() {
document.location.href = 'http://www.spritely.net/';
});

$('#clouds').pan({fps: 30, speed: 0.5, dir: 'right', depth: 10});
$('#clouds2').pan({fps: 30, speed: 0.5, dir: 'left', depth: 10});



window.page = {
hide_panels: function() {
$('.panel').hide(300);
},
show_panel: function(el_id) {
this.hide_panels();
$(el_id).show(300);
}
}

});
})(jQuery);

</script>

خب تقریبا تموم شده . حالا کمی کد بالا رو توضیح می دم :

CSS

$('#clouds').pan({fps: 30, speed: 0.5, dir: 'right', depth: 10});

$('#clouds').pan({fps: 30, speed: 0.5, dir: 'right', depth: 10});

در کد بالا fps سرعت فریم انیمیشن .speed : سرعت انجام انیمیشن

dir : حرکت از چپ به راست یا از راست به چپ با مقدار دهی right یا left

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


<div id="stage" class="stage"> <div id="tap" class="stage"></div> <div id="bg" class="stage"></div> <div id="clouds" class="stage"></div> <div id="clouds2" class="stage"></div> </div> <div class="toppt"><h2> آسمان وردپرس</h2></div>


<div id="stage" class="stage">
<div id="tap" class="stage"></div>
<div id="bg" class="stage"></div>
<div id="clouds" class="stage"></div>
<div id="clouds2" class="stage"></div>

</div>

<div class="toppt"><h2> آسمان وردپرس</h2></div>

تمام ! حالا اگه بخواین به وردپرس اضافش کنین تمام مراحل بالا رو تکرار کنین فقط کدهای جی کوئری رو داخل فایل header.php کپی کنین !

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

دانلود

3

به اشتراک گذاری این پست


لینک به پست

ممنون بابت آموزشتون

اگر داخل بخش آموزش می نوشتین بهتر بودش : http://forum.wp-parsi.com/tutorials/

در ضمن قسمت های دریافتی رو لطفا در خود انجمن هم پیوست کنین که بعدا دچار مشکل نشه ;)

0

به اشتراک گذاری این پست


لینک به پست

ممنون بابت آموزشتون

اگر داخل بخش آموزش می نوشتین بهتر بودش : http://forum.wp-parsi.com/tutorials/

در ضمن قسمت های دریافتی رو لطفا در خود انجمن هم پیوست کنین که بعدا دچار مشکل نشه ;)

یادم نبود . دفعات بعد پیوست می کنم ایشالا

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط behnamstar
      سلام و عرض ادب
      من یه سایت وردپرسی دارم که به تازگی تغییر دامنه روش انجام دادم که بعد ازینکار مشکل عجیبی اتفاق افتاده 
      من دامنه ی https://damane1.co m رو ریدایرکت کردم به https://damane2.co m الان اتفاقی که میفته دامنه 1 ریدایرکت میشه روی دامنه 2 
      ولی زیر دامنه ها ریدایرکت نمیشن 
      مثلا روی این لینک کلیک بشه (https://damane1.co m/linksite) باید این لینک باز شه (https://damane2.co m/linksite)
      ولی این لینکها جدا جدا باز میشن 
      فقط دامنه https://damane1.co m روی https://damane2.co m ریدایرکت میشه بقیه ی لینک ها همه جدا جدا باز میشن.
      ممنون میشم از دوستان کمک کنن 
      حتی به هاست پشتیبانی هم تیکت دادم ولی متوجه مشکل نشدن.
    • توسط hatef
      سلام دوستان
      خسته نباشید من پسرم 15 سالشه و عاشق کامپیوتر و برنامه نویسی مخصوصا طراحی سایته. متاسفانه آموزش برنامه نویسی برای بزرگسالان زیاده اما منی که برای کودکان میخوام اصلا نیستش شما ها که همگی واردید در این زمینه آیا سایتی میشناسید که بتونه برای کودکان برنامه نویسی رو ساده و در حد خودشن یاد بده؟
      البته یکی دوتا سایت هستش برای کودکان که آموزش های زیادی دارن بعد آموزش برنامه نویسی هم دارن اما الان دقیق نمیتونم لینکشو بدم چون پیداش نمیکنم اما آدرس کلی سایتشونو میدم اگزر چک کنید هستش توش. معرفی کنید ممنون میشم.
       
      این سایت آموزش های همه چی در مورد کودکان داره ولی لینکه برنامه نویسشو پیدا نمکینم:
      https://kodakanema.com/
       
      این سایتم که خیلی معروفه اینم هستش.
      https://www.ninisite.com/
      یکی دیگه هم هستش اسمش فرادرسه اما نمیدونم چجوریه
      https://faradars.org/courses/fvsch9503-scratch-visual-programming-for-children
    • توسط Streetlife
      سلام دوستان گرامی و متخصصان
      بنده یک سوال مهم و یک راهنمایی از اساتید نیازمندم
      میخوام به یک سایت وردپرسی به صورت پاپ اپ یک صفحه نطرسنجی رو اضافه کنم.نظرسنجی به صورت پاسخ دلخواست و میخام کاربر وقتی میخواد کلمه ی مورد نظر که از محصولات سایت هستش رو تایپ میکنه با نوشتن قسمتی از اون به صورت پیشنهادی کلمات مشابه رو نشون بده مثل گوگل
      هرچی گشتم چیزی رو پیدا نکردم خواهشمندم راهنمایی بفرماااییید
    • توسط mina_exchange
      سلام دوستان . ممکنه کم و بیش شما با واژه هایی مثل "برون سپاری" و یا معادل انگلیسی آن "freelancing"  آشنایی داشته باشید. واژه فریلنسر برای اولین بار  توسط «سر والتر اسکات» در رمان مشهور ایوانهو به کار برده شد و اشاره به سربازهایی داشت که در جنگ‌های قرون وسطایی به صورت مزدور والبته بدون التزام و تعهد به اربابی خاص، می‌جنگیدند یا اصطلاحاً نیزه می‌زدند. بعدها واژه فریلنسر شکلهای دیگری هم به خود گرفت و کم‌کم تبدیل شد به اصطلاحی رایج.اما امروز فریلنسر به کسی گفته میشود که در ازای گرفتن حق الزحمه ، خدمات تخصصی را به کارفرمایان و مشتریان بدون داشتن  قرارداد بلندمدت ارائه میدهد. بطور کلی فریلنسرها از تنوع کاری زیادی نسبت به کارمندان برخوردار هستند. بدون درنظر گرفتن به نیاز به یک درآمد ثابت - معمولاً آزادی عمل بیشتری برای انتخاب زمان و مکان کار خود دارند.تجربه کارهای متفاوت مشخصه‌های آن‌ها را می‌سازد و در نتیجه شبکه‌ای از مشتریان برای خود تشکیل می‌دهند. شما با داشتن هر توانایی و هرمهارتی می توانید با شیوه فریلنسینگ از آن توانایی و یا مهارت خود کسب درآمد کنید.اما مشتری را چه کسی برای شما پیدا میکند؟! امروزه وبسایت های زیادی در این زمینه مشغول به فعالیت هستند. از نمونه های ایرانی آن میتوان به وبسایت هایی همچون "پارسکدرز" ، " کاریتو"، "پونیشا" و... اشاره کرد. این وب سایت ها به عنوان یک واسطه بین کارفرما و مجری (یا همان فریلنسرها) عمل میکنند به این صورت که کارفرما خدمت مورد نیاز خود را در اینگونه وبسایت ها اعلام میکند و شما اگر توانایی انجام خدمت مدنظر کارفرما را داشته باشید، با کارفرما وارد دیالوگ شده و  قیمت پیشنهادی و مهلت انجام کار را تعیین میکنید و پس از انجام مذاکره در صورتی که کار به شما واگذار گردد درصدی از حق الزحمه را به وبسایت پرداخت میکنید. البته تعدای از این وبسایت ها حق اشتراک ماهانه نیز از شما دریافت میکنند. هرکاری که بتوان در بستر اینترنت انجام داد نظیر تایپ، ترجمه، برنامه نویسی، طراحی سایت، انجام کارهای گرافیکی و... قابل درخواست از طرف کارفرما و قابل ارائه از طرف فریلنسرها می باشد. اگر شما یک طراح سایت حرفه ای و یا یک برنامه نویس حرفه ای باشید، سایتهای برون سپاری در کسب درآمد شما جایگاه ویژه ای پیدا میکنند چرا که بیش از نود درصد درخواست ها از طرف کارفرمایان در سایت های برون سپاری در این حوزه قرار میگیرد. و اگر حتی بخواهید به دلار کسب درآمد کنید این امکان نیز با ثبت نام در سایت های برون سپاری جهانی نظیر "freelancer.Com" و یا "UpWork.com"  برای شما فراهم میشود. البته به علت تحریم های ایران ، امکان ثبت نام در این دو سایت برای فریلنسرهای ایرانی فراهم نمی باشد اما ما مفتخریم اعلام کنیم که مجموعه ما یعنی "Mina_Exchange"  این امکان را فراهم آورده است. در صورت تمایل به عضویت در freelancer.com به وبسایت
        http://mina-exchange.com/  مراجعه کنید.
    • توسط drmajidghiasi
       آموزش افزونه WP PostViews
      مخزن وردپرس پر است از انواع افزونه‌های مختلف برای نمایش بازدید و آمار و حتی نمایش آمار به کاربران اما افزونه WP-PostViews
      چندین مزیت دارد که به آن‌ها اشاره می‌کنیم.
       
      امکانات ویژه افزونه WP-PostViews:
      سبکی خاص بدون فشار به سرور رابط کاربری آسان و… برای نمایش آمار برای خودمان نیاز به هیچ نوع تنظیم خاصی ندارد اما برای نمایش در بخش خاصی از قالب سایت نیاز به قرار دادن چندین کد در قالب سایت داریم که در این آموزش یعنی آموزش افزونه WP-PostViews ریزبه‌ریز افزونه را باهم بررسی خواهیم کرد.
       
      نصب افزونه WP-PostViews
      برای نصب این افزونه طبق مراحل  زیر اقدام کنید:
      یا از قسمت افزونه‌ها روی گزینه بارگذاری افزونه کلیک کنید و از لینک زیر افزونه را دانلود کنید و سپس در قسمت بارگذاری، افزونه را بارگذاری کنید. یا اینکه از قسمت کلیدواژه WP-PostViews را تایپ کنید و افزونه WP-PostViews را در مخزن وردپرس جستجو کنید و سپس نصب و فعال‌ کنید. پس از نصب و فعال‌سازی افزونه گزینه‌ای بانام PostViews در بخش تنظیمات وردپرس اضافه می‌شود برای انجام تنظیمات روی این گزینه کلیک کنید.
       

      تنظیمات افزونه WP PostViews بخش بازدید مطالب:
      Count Views From: در این بخش مشخص می‌کنیم که افزونه بازدید چه دسته از افرادی را حساب کند؛ میهمانان، کاربران ثبت‌نام‌شده یا هر دو. Exclude Bot Views: در نظر نگرفتن بازدید ربات‌ها. Views Template: در این بخش یک قالب کلی مشخص می‌کنیم برای نوع نمایش تعداد بازدید و می‌توانیم از متن‌های فارسی هم استفاده کنیم البته توجه داشته باشید که در حال پیش‌فرض ما کلمه views را می‌توانیم فارسی کنیم و دو کد کوتاهی که افزونه دارد نباید دست‌کاری کنیم فقط باید استفاده کنیم. توجه کنید: هر مطلب در پیشخوان وردپرس بخشی به اسم views اضافه‌شده است که درصورت تغییر کلمه بالا نام این کلمه به نامی که شما تغییر می‌دهید تغییر خواهد کرد. Most Viewed Template: ازنظر عملکرد این بخش هم مثل بخش بالا برای ساخت یک قالب کلی است اما در این بخش امکانات و کدهای کوتاه بیشتری را داریم که می‌توانیم برای مطالب پرطرفدار استفاده کنیم.  

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

      نمایش بازدید مطالب با کد کوتاه:
      در انتهایی هر مطلب می‌توانید با قرار دادن کد کوتاه افزونه میزان بازدید را نمایش دهید. می‌توانید از تعداد بازدید: ۱۵۸ یا تعداد بازدید: ۰ استفاده کنید. عدد ۵۴ در کد کوتاه شناسه مطلب است که هر مطلب شناسه خاص خودش را دارد که راحت‌ترین روش به دست آوردن شناسه طبق عکس زیر بردن موس بر روی اسم مطلب است.

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

      نمایش بازدید توسط کد:
      هر قالب شامل فایل‌های مختلفی است مثلاً فایل (Page.php) مخصوص نمایش صفحات سایت است و یا (Single.php) مخصوص نمایش ادامه مطالب است. در هرکدام از صفحاتی که قصد نمایش بازدید را دارید آن صفحه را بازکنید، مثلاً ما می‌خواهیم در بخش ادامه مطلب سایت تعداد بازدید را نمایش دهیم، برای همین فایل (Single.php) قالب را باز می‌کنیم که معمولاً در اکثر قالب‌ها در این مسیر یافت می‌شود.
      wp-content/themes/<Name Ghaleb>/single.php
      فایل را بازکنید و دنبال کدی مشابه کد زیر بگردید.
      ۱ <?php while (have_posts()) : the_post(); ?>
      حالا در پایین همین کد هرجایی که قصد نمایش تعداد بازدید را دارید کد زیر را قرار دهید.
      ۱ <?php if(function_exists('the_views')) { the_views(); } ?>
      برای اینکه تشخیص بدهیم کد را دقیقاً کجا باید قرار بدهیم نیاز به کمی دانش برنامه‌نویسی هست که بخشی را که بالای مقالات و یا پایین مقالات است را تشخیص بدهیم، به‌هرحال در فیلم آموزشی روشی را توضیح داده‌ایم که اگر کد نویسی این مورد را هم بلد نیستید به‌راحتی از همین چند خط شروع کنید.

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