WordPress #7: Page Jump

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/

Một suy nghĩ 111 thoughts on “WordPress #7: Page Jump

    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 ^^

      Số lượt thích

  1. 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

    Số lượt thích

    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>

      Số lượt thích

  2. 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 ?_?

    Số lượt thích

  3. 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>

    Số lượt thích

  4. 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 ^^

    Số lượt thích

  5. 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?

    Số lượt thích

    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

      Số lượt thích

  6. 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 …

    Số lượt thích

    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

      Số lượt thích

  7. 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è?

    Số lượt thích

    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 ¯)/

      Số lượt thích

      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. :)

        Số lượt thích

    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

      Số lượt thích

  8. ô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

    Số lượt thích

    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

      Số lượt thích

      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

        Số lượt thích

  9. 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

    Số lượt thích

                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

                  Số lượt thích

  10. 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

    Số lượt thích

  11. 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!

    Số lượt thích

  12. 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?

    Số lượt thích

  13. 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

    Số lượt thích

  14. 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

    Số lượt thích

  15. 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

    Số lượt thích

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s