WordPress #7: Page Jump

Đăng vào by ~ Yappa ~

Nội dung

Page Jump nghĩa là khi bạn click vào một liên kết và ngay lập tức nhảy đến một vị trí nào đó trong bài viết đó hay một bài viết khác. Thử nhé ^^

Click để nhảy

Vì sao lại dùng Page Jump?

Bạn có các chú thích trong truyện và giải thích cho mỗi chú thích đấy lại ở cuối trang. Vậy thay vì để độc giả từ kéo xuống cuối đọc chú thích rồi lại kéo lên để đọc truyện tiếp thì hãy dùng nó để nhảy cho nhanh hơn ^^

Cách tạo Page Jump

Đầu tiên vẫn là chuyển sang chế độ HTML

Một đường dẫn ‘Click me’ được viết như sau:

<a href="#abc-def">Click me</a>

Để ý cái sau dấu thăng (#) nhé

Nơi đường dẫn trên nhảy đến sẽ được viết như sau:

<a name="abc-def"></a>

#abc-def trùng với name="abc-def"

Như vậy tức là bạn có thể có

<a href="#def-ghi">Nhảy 2</a>

Để nhảy tới một địa điểm thứ 2

<a name="def-ghi"></a>

Cứ như thế bạn có thể làm bao nhiêu cái Page Jump cũng được :D

Vẫn chưa rõ, vậy sẽ xem một ví dụ chi tiết hơn nhé ＼（＾ ＾）／

Bài viết được đưa ra làm ví dụ là bài này

Code ví dụ của phần này

<h4 style="text-align: center;">Văn án</h4><a name="1"></a>
Hắn Lưu Tích Tứ, sinh ra miệng đã ngậm thìa vàng <a href="#0">(1)</a>,
Trên có hoàng gia gia, phụ hoàng, phụ vương cùng vương thúc nâng đỡ, dưới có thái tử ca ca, Vận phường Vanh thân vương làm chỗ dựa,
Chưa kể bản thân hắn lại là Hiển thân vương được muôn vàn sủng ái.<a name="2"></a>
Lúc trước phụ hoàng ban cho hắn danh hiệu này vì chính là muốn cho hắn cả đời phúc phúc an an, làm một vương gia tự tại nhàn nhã <a href="#0">(2)</a>.
Có thể nói thiên hạ hiện nay ngoại trừ một người ra, cho dù là phụ hoàng, hắn cũng dám ở ngoài miệng lão hổ nhổ râu.
Nhưng một Ly Nghiêu này lại khiến cho hắn hứng thú, để hắn không ý thức mà lâm vào cạm bẫy sẵn của y,
Chờ khi hắn phát giác, hắn đã sớm bị đối phương gắt gao bắt được.
Hắn mặc kệ! Hắn mới không muốn giống như phụ thân, Hãn Triệt đâu.<a name="0"></a>
Chú thích
(1) được sinh ra trong gia đình giàu có <a href="#1">↑</a>
(2) "Hiển" trong "Hiển thân vương" có nghĩa là vinh hiển, hiển đạt, hiển hách <a href="#2">↑</a>

Còn gì chưa hiểu thì cứ tự nhiên hỏi na ＼(￣▽￣)／

Nào, giờ thì click để quay lại chỗ cũ ^^

https://tieuxuyen.wordpress.com/meo-wordpress/

111 bình luận về “WordPress #7: Page Jump”

  5. Hi, nàng có cái code nào để tránh (làm khó hơn cũng được) để người đọc khó khăn copy text trong blog của mình không?

    Ta lướt vài blog thấy không copy được text nên muốn biết cách làm giống vậy.

    Đã thích bởi 2 người

    Trả lời

    1. WordPress không có chức năng ấy nàng ạ, chỉ có blog trên host riêng mới có thôi

      Ta chỉ có cách làm khó ng khác khi copy thôi, còn nếu biết thì vẫn copy được ^^

      Thích

      Trả lời

    1. nhảy link qua web khác thì bạn paste thẳng địa chỉ đó vào là wordpress tự nhận thôi ^^

      hoặc nếu bạn muốn link có dạng bấm vào chữ bất trang đó, ví dụ như, bấm vào chữ Click here để nhảy, bạn làm như sau

      mở 1 bài viết mới, gõ Click here; bôi đen chữ Click here, chọn biểu tượng Insert/edit Link hoặc bấm Alt-Shit-A, làm theo chỉ dẫn trong đó là đc ^^

      Thích

      Trả lời

  7. Chị ơi em cũng chưa làm được >.<
    Em làm như chị hướng dẫn, sau chỗ cần chú thích thì để (1), sau chú thích thì để ↑ mà vẫn không được chị à T.T

    Cụ thể như ở đây ạ:

    Ta đương nhiên vẫn nhớ Tam di nương. Cẩn nương từng kể người được gả cho một tướng quân, nói vậy cuộc đời y cũng là một bi kịch giống như ta. Ta nhìn Ngân Mặc đang đứng đằng sau Ám Toán, thấy trong mắt y là ý đề phòng ngờ vực, cùng với dung mạo lãnh nhược băng sơn(1), đột nhiên cảm thấy thương hại cho y.

    (1) lãnh nhược băng sơn: lạnh tựa băng giá ↑

    Em sai ở đâu hả chị??? T.T

    Thích

    Trả lời

    1. em chưa đặt chỗ để nhảy đến rồi ^^

      với ví dụ của em thì để thế này nhé ^^

      <a name="1"></a>Ta đương nhiên vẫn nhớ Tam di nương. Cẩn nương từng kể người được gả cho một tướng quân, nói vậy cuộc đời y cũng là một bi kịch giống như ta. Ta nhìn Ngân Mặc đang đứng đằng sau Ám Toán, thấy trong mắt y là ý đề phòng ngờ vực, cùng với dung mạo lãnh nhược băng sơn <a href="#0">(1)</a>, đột nhiên cảm thấy thương hại cho y.
<a name="0"></a>
(1) lãnh nhược băng sơn: lạnh tựa băng giá  <a href="#1">↑</a>

      Đã thích bởi 1 người

      Trả lời

  9. VD cả bài ta có đúng 1 chú thích là [1] vậy thì trong code ta sẽ phải chèn 4 lệnh


    (1)


    ↑

    VD : Đoạn văn
    Quân tử hảo cầu [1]
    ..
    [1] Quân tử hảo cầu là …

    Chèn vô :

    Quân tử hảo cầu [1](1)
    ..
    [1] Quân tử hảo cầu là …↑ ↑

    có đúng ko hả nàng?

    nếu có từ 2 chú thích trở lên thì làm giống trên kia, nhưng sao ta chỉ thấy 3 lệnh có số 2? ko phải 4 mỗi cái à, 2 lệnh ở đầu và cuối mỗi câu dùng làm địa điểm nhảy ?_?

    Thích

    Trả lời

  10. có 1 chú thích thì nàng làm như trong này

    mỗi cái chú thích sẽ có các thẻ sau gắn với nó:

    • liên kết đặt ở số (1), (2), vân vân,…; liên kết này dẫn tới vị trí chú thích chung
      ở ví dụ trong bài viết thì nó là lệnh này

      <a href="#0">(1)</a>

    • thẻ đặt tại vị trí muốn nhảy về từ chú thích chung, tức là khi bấm vào liên kết ↑ ở chú thích chung thì nó sẽ nhảy về điểm này
      ở ví dụ trong bài thì nó là

      <a name="1"></a>

      thẻ này nên đặt trước đoạn chứa chú thích đó

    tại chú thích chung sẽ có các thẻ sau đây

    • thẻ đặt tại vị trí muốn nhảy đến (ở đây chính là chú thích chung), được đặt trước chữ “Chú thích”
      ở ví dụ trong bài thì nó là

      <a name="0"></a>
      Chú thích

    • liên kết quay lại, được đặt tại dấu ↑; liên kết này sẽ dẫn đến vị trí đã được đặt trước trong thẻ <a name="1"></a>
      ở ví dụ trong bài là

      <a href="#1">↑</a>

    Thích

    Trả lời

  11. Trước đây ta có thấy vài mẫu code kiểu tương tự mà làm hoài không được, vừa hay hôm nay thấy trang này của này, mới thử xong rất là ok xD~

    Cám ơn nàng rất nhiều ^^

    Thích

    Trả lời

  12. Bạn ơi cho mình hỏi, bạn có biết cách chú thích một hàng chữ mà khi di chuột đến hàng chữ đó, chú thích đó sẽ hiện ra trong một khung nhỏ, và con chuột biến thành mũi tên có dấu chấm hỏi không?

    Thích

    Trả lời

    1. mũi tên biến thành dấu chấm hỏi thì mình không biết, nhưng di chuột tới chữ hiện ra chú thích thì mình biết, cơ mà như thế thì các bạn trên di động không đọc được chú thích đó đâu bạn ạ ‘_’

      well, nếu bạn cần thì bảo, mình chỉ cho

      Thích

      Trả lời

  18. Xin chào chị ~ Yappa ~ !!
    Mình thấy chị trình bày bài viết này có nhiều thủ thuật hay; ví dụ như:
    1. Chị tạo list nội dung (giống như mục lục để jump đến mục đó trong bài cho nhanh)
    2. Ở phần có view source > khi click vào mới hiện thông tin text ra
    3. Chị insert đoạn ví dụ {text} mà khi click vào có , , ..

    Mong chị hướng dẫn cách làm với. Cảm ơn chị nhiều nhiều …

    Thích

    Trả lời

    1. Chào bạn.
      1. Về phần nội dung, thì ngay như trong bài này đã hướng dẫn, mình sử dụng Page Jump để làm
      2. Với view source, mình sử dụng code sau

      [sourcecode collapse="true"]
      Nội dung
      [/sourcecode]

      3. Mình không hiểu ý của bạn lắm
      Thân

      Thích

      Trả lời

  19. Cám ơn ~ Yappa ~ nhiều nhiều nè,

    Ở câu hỏi 3 > ý của mình là làm sao chị insert được nhiều đoạn ví dụ dạng text _ cho phép người đọc có thể copy… (giống như câu hỏi 2 đó).
    Chị dùng code nào vậy nè?

    Thích

    Trả lời

    1. A, tớ đã tìm thấy cách dùng page jump để chuyển sang 1 trang khác hay 1 post khác. Chỉ cần thêm link của cái trang/post đấy vào trước cái cụm #abc-def của cái code mở đầu là ok
      \(¯v ¯)/

      Thích

      Trả lời

      1. ý tớ là dùng page jump để nhảy từ trang 1 sang trang 2 của cùng 1 post là không được, hôm qua tớ thử đi thử lại mãi mà. nhưng thêm cái link của page 2 vào đằng trước dấu # là ok. :)

        Thích

        Trả lời

  23. Ưm .. thật tình là tớ hông hiểu lắm .. Mắt cứ căng ra .. Người với màn hình comp cứ nhìn nhau suốt nửa tiếng .. Yappa có thể giải thích bằng hình ảnh cho tớ đc không ? Ò.ó

    Thích

    Trả lời

    1. cái này hoàn toàn là code có hình ảnh đi nữa thì cũng thế thôi
      bạn nên copy cả phần ví dụ của tớ ở cuối bài viết rồi chỉnh lại với nội dung của bạn là tốt nhất

      Thích

      Trả lời

  24. ôi trời, xin lỗi vì com như spam, nhưng wp nó không chịu hiện dòng code, nói chung có đoạn code đề #0 và 0 ngoài các số 1, 2 là để làm gì và đặt ntn vậy bạn? thực tình xin lỗi TT

    Thích

    Trả lời

    1. bản thân các số 0 1 2 là do mình đặt cho dễ nhớ thôi
      kiểu như 0 tương ứng với chú thích, 1 là chú thích 1, 2 là chú thích 2
      bạn có thể đặt tên như thế nào cũng được

      Thích

      Trả lời

  28. bạn ơi mình thử lảm nhưng tại sao lại không được vậy? dù nó có hiện ra chỗ nhảy link nhưng khi bấm vào nó lại ko nhảy

    Thích

    Trả lời

      1. mình copy lại nguyên phần hướng dẫn của bạn để làm thử mà nó vẫn không nhảy link. cái phần vào đầu trang nhưng nó vẫn ko nhảy

        Thích

        Trả lời

  29. file:///C:/Documents%20and%20Settings/Microsoft/Desktop/untitled.bmp
    đây nè bạn, đây là phần copy để trang đó nhảy sang, vì mình làm thử nên chỉ viết linh tinh thôi

    Thích

    Trả lời

            1. bạn mới chỉ tạo nơi đường dẫn sẽ nhảy đến chứ chưa tạo đường dẫn để click vào
              tức là bạn mới tạo thẻ a name chứ chưa tạo a href đó

              Thích

              Trả lời

                1. nói chung thì ko được nhìn trực tiếp nên tớ cũng khó mà biết được bạn bị lỗi gì
                  nhưng tớ nghĩ bạn nên copy thử phần ví dụ của tớ, phần ví dụ cả đoạn văn án Hồng phúc dao ấy, xem thử có nhảy được không
                  nếu được thì sửa trên nền là cái đoạn đó thì sẽ dễ hơn

                  Thích

                  Trả lời

  30. Bạn ơi, vậy muốn tạo cái nút “expand source” giống bạn để click vào thì nó hiện phần đó ra thì làm sao thế?

    Thích

    Trả lời

  32. tỷ ơi, e muốn hỏi là để gắn link cho page con phải làm thế nào? VD e có page chính là “Đang tiến hành”, rồi tạo 1 page con nối vs nó là “MTTSCTCHH”, sau đó dẫn link bài viết vào page con đó, thì phải làm sao ạ?? tỷ có thể trả lời giúp e vào mail ko : emily120896@gmail.com

    Thích

    Trả lời

      1. e…_.__||| ko thấy, e đã tạo page mẹ, sau đó tạo page con, e muốn bik cách gắn link để khi bấm vào nhảy vào bài viết e muốn đó ạ :D

        Thích

        Trả lời

          1. thks tỷ ^^ cho e hỏi cái này nữa ạ, muốn chỉnh chặn copy văn bản trên wp như bên blogspot thì làm thế nào ạ, phiền tỷ lần nữa :-P

            Thích

            Trả lời

        1. 2 cái đấy khác nhau mà bạn, sao giống nhau được
          còn nếu bạn làm trên host riêng thì chắc là có cách, nhưng mình không làm nên không biết

          Thích

          Trả lời

  35. chào chị!!
    e muốn hỏi là muốn làm mấy cái giống chữ “này” của chị ý bấm vào là sang trang khác đó là làm giống như chị bày đó hả? và làm với bất kì trang nào có thể nhập văn bản luôn hả? còn một điều nữa là chuyển sang html ở đâu z? e có xem 1 vài trang khác nhưng vẫn k làm đc!

    Thích

    Trả lời

  38. cho mình hỏi, mình làm theo hướng dẫn, đại loại cũng là copy nguyên cả cái code của bạn vào rồi thì ở trang chủ ấn vào đường dẫn vẫn sẽ nhảy đến chỗ mình đặt, nhưng khi vào hẳn post chứa đường dẫn mà ấn thì lại không nhảy đến bài kia nữa. Mình làm sai ở đâu vậy?

    Thích

    Trả lời

  39. cho tớ hỏi cái này nhé. có vẻ hơi ngốc một tí. hí hí. làm cách nào tạo ra được cái sick hàng xanh xanh dưới chữ: Related í.

    bạn chỉ giúp mình với.

    Thích

    Trả lời

  40. lá cái hàng màu xanh dưới chữ RELATED í

    “WordPress #5: Next Page – More
    In “WordPress”

    WordPress #6: Mục lục
    In “WordPress”

    RSS #2
    In “Nhảm””

    ai!!!!!!!!!!!!!!!!! không biết nói sao cho nàng hiểu nữ. hu hu hu

    Thích

    Trả lời

  41. Chi ơi, em xin làm phiền thêm lần nữa ạ, em đã đặt page jump rồi, nhưng link chính em đặt ở trang 1 còn phần em muốn hiển thị nằm ở trang 2 của cùng một bài, em làm theo như chị đã nêu nhưng nó không đổi sang trang khác ạ TToTT

    Thích

    Trả lời

  42. Cảm ơn bạn đã chia sẻ nha, mấy bài viết này hữu ích lắm lun cho cái đứa gà mờ như mình. Mà bạn có thể chỉ mình cách hiện chú thích khi rê chuột vào được không ?

    Thích

    Trả lời

  43. Bạn ơi, b có biết tại sao mình làm y như b hướng dẫn r mà khi nhấp vào cái kí hiệu đã đặt link tới chú thích cuối trang là lại y kì tải lại cái trang đang đọc ở vị trí đầu bài luôn

    Thích

    Trả lời
  45. Pingback: Kinh nghiệm edit – Nhất chỉ lưu niên 一纸流年

Bình luận về bài viết này