สอนเล่น Wordpress

[Rabbitinblack]

WordPress : รวมเครื่องมือสำหรับทำ Theme WordPress

วิธีใช้ WordPress ตอนที่ 9 – วิธีติดตั้ง Plugins

WordPress : จัดการกับ Permalinks

[ฟิ้งซ์]

ฟิตจริงๆ

[Piix]

ประโยชน์คนละอย่างครับ
FB ดีตรงที่เรียกคนเข้ามาง่าย ถ้ามีคนเม้นปั๊บเพื่อนเห็นทันที
แต่ข้อเสียคือ data ไม่ใช่ของเราเลย อันนี้ disqus ได้เปรียบกว่า
แถม disqus ก็มี +/- , ดีไซน์ได้ และแชร์ไปที่อื่นได้ด้วย
(ข้อเสียของการมีข้อมูลเก็บในบล็อกก็คือมันหนักกว่า)

ถ้าใช้ของ fb คนที่ไม่มี fb ก็คอมเม้นท์ไม่ได้ด้วยรึเปล่า

[iannnnn]

อันนี้ก็ต้องชั่งน้ำหนักว่าเว็บเราจะแคร์ไหม

[ฟิ้งซ์]

ถามครับ
ถ้าเราอยากได้ปุ่ม back to top เวลาเรา scroll ลงด้านล่างแล้วปุ่มค่อยปรากฏออกมาให้กด
กดแล้วหน้าเพจจะเลื่อนขึ้นสู่ตำแหน่ง top 100%
เหมือนเว็บนี้ http://www.html5press.com
ทำยังไงครับ หรือต้องมีสคริปต์อะไรเพิ่ม


// เพิ่มเติมๆ ลองแงะดูในตีมเจอไฟล์ jquery.ui.totop.js อยู่ด้วยแฮะ
ถ้าเราจะเอาไปใช้ร่วมกับตีมปัจจุบันมันต้องทำไงบ้างครับ

ทำไปด้วย ถามไปด้วย หนุกดีแฮะ

[JΛNΣ]

ถ้าจะเอาแบบบ้านๆ ไม่หวือหวา ก็เป็น link ธรรมดาของหน้านั้นๆ แล้วก็เติม # ลงไป

เช่นหน้านี้ http://www.f0nt.com/forum/index.php/topic,1556.msg1594518/topicseen.html#


// อ้าว มันดันเปิดหน้าใหม่ เลยไม่เห็นเลย 

[iannnnn]

ถ้าแค่ top ก็ a href="#top"
แต่ถ้าใช้ jQuery ช่วยก็เอาชื่อนั้นแหละไปค้นกูเกิลครับ มาถูกทางละ

[ฟิ้งซ์]

ถ้าใช้ anchor แบบปกติคือเราต้องกำหนดชื่อ # ให้กับส่วนใดส่วนหนึ่งของเว็บเพจใช่ไหมครับ
ถ้าไม่ใช้ DW ไม่เคยทำได้เลย
ไอ้ตรงที่ต้องกำหนดชื่อเนี่ย มันเขียนโค้ดยังไงอ่ะ

ที่เรียนมามันบอกให้คลิกใน DW แล้วเขียนชื่อลงช่อง เลยไม่เข้าใจว่าเวลาโค้ดดิ้งกันเค้าทำไง
เค้าสอนดีนะ แต่หลักสูตรแบบเก่าๆ สอนใช้แต่ table

[JΛNΣ]

ใส่ชื่อ คือสำหรับไปยังตำแหน่งต่างๆ ในหน้านั้น

โค้ด เลือกทั้งหมด ขยายเนื้อหา


เกือบๆ บน<a name="almosttop"></a>
...
...
...
...
<a href="#almosttop">ไปเกือบๆ บน</a>



แต่ถ้าไม่มีชื่อ ใส่แค่ # มันจะไปบนสุด

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<a href="#">ไปบนสุด</a>

[หนุ่ม]

syntax anchor มันเป็นแบบนี้ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<a name="top" id="top"></a>

เอาไปแปะตรงไหนก็ได้ แล้วเวลาจะทำลิงค์ให้หน้ามันวิ่งไปหาก็เติม #top เข้าไป





//อ้าว โดนปาดหน้า

[ฟิ้งซ์]

อ๋อ เขียนกำหนดลงไปในลิงค์ a เลยสินะ
ขอบคุณครับ บวกให้ทุกคนเลย

[Rabbitinblack]

  เยี่ยมไปเลย

[ฟิ้งซ์]

ตอนนี้ปุ่ม back to top ตามที่ต้องการมีแล้วครับ ถ้า scroll ลงมาจาก ตำแหน่ง top แล้วปุ่มจะค่อยๆ ปรากฏ
แต่ปัญหาคือ คลิกปุ่มแล้วมันโดดขึ้นไปอยู่ตำแหน่ง top แวบเดียวเลย
ไม่เหมือนที่ต้องการคือค่อยๆ เลื่อน scroll ขึ้นไป ไม่รู้ว่าเราต้องไปเพิ่มพวก delay time ตรงไหนหรือเปล่า
มีใครพอจะแก้โค้ดตัว js ได้ไหมครับ หรือว่าต้องไปกำหนดที่ไฟล์อื่น

โค้ด เลือกทั้งหมด ขยายเนื้อหา


/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

(function($){
$.fn.UItoTop = function(options) {

var defaults = {
text: 'To Top',
min: 200,
inDelay:600,
outDelay:400,
  containerID: 'toTop',
containerHoverID: 'toTopHover',
scrollSpeed: 1200,
easingType: 'linear'
};

var settings = $.extend(defaults, options);
var containerIDhash = '#'   settings.containerID;
var containerHoverIDHash = '#' settings.containerHoverID;

$('body').append('<a href="#" id="' settings.containerID '">' settings.text '</a>');
$(containerIDhash).hide().click(function(){
$('html, body').animate({scrollTop:0}, settings.scrollSpeed, settings.easingType);
$('#' settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType);
return false;
})
.prepend('<span id="' settings.containerHoverID '"></span>')
.hover(function() {
$(containerHoverIDHash, this).stop().animate({
'opacity': 1
}, 600, 'linear');
}, function() {
$(containerHoverIDHash, this).stop().animate({
'opacity': 0
}, 700, 'linear');
});

$(window).scroll(function() {
var sd = $(window).scrollTop();
if(typeof document.body.style.maxHeight === "undefined") {
$(containerIDhash).css({
'position': 'absolute',
'top': $(window).scrollTop()   $(window).height() - 50
});
}
if ( sd > settings.min )
$(containerIDhash).fadeIn(settings.inDelay);
else
$(containerIDhash).fadeOut(settings.Outdelay);
});

};
})(jQuery);


กับโค้ดที่เอาไปแปะไว้ตรง header.php ตรงก่อน </ head>

โค้ด เลือกทั้งหมด ขยายเนื้อหา


<script type="text/javascript">
jQuery(document).ready(function() {
jQuery().UItoTop({ easingType: 'easeOutSine',text: 'Back To Top',min: '300'});
});
</script>
<script type='text/javascript' src='http://www.ifinxz.com/wordpress/wp-content/themes/ifinxzclean/js/jquery.ui.totop.js?ver=1.1'></script>
<a href="#" id="toTop" style="display: inline; ">
<span id="toTopHover" style="opacity: 0; "></span>
Back To Top</a>


ไม่รู้ว่าตรงไหนผิด มันเลยไม่ scroll ให้
ใครเข้าใจช่วยแนะนำหน่อยครับ
เพราะถ้าตามที่เข้าใจ ไฟล์ style.css มันน่าจะปรับแค่หน้าตาของปุ่มมากกว่าฟังก์ชั่นนะ

[Rabbitinblack]

jQuery().UItoTop({ easingType: 'easeOutSine',text: 'Back To Top',min: '300'});

เพิ่มเป็น

jQuery().UItoTop({ easingType: 'easeOutSine',text: 'Back To Top',min: '300',scrollSpeed: เวลาที่ต้องการ});

[ฟิ้งซ์]

ไม่ได้อ่ะ เพิ่มเป็น 30000 ยังไม่ได้เลย