Cách tạo Plugin gallery hình ảnh nhanh chóng cho WordPress

Tìm hiểu cách tạo plugin gallery hình ảnh đơn giản, hỗ trợ điều hướng qua ảnh đại diện cho WorPress. Kết quả sau cùng là một gallery đơn giản, hấp dẫn với điều hướng thumbnail được tự động tạo ra mỗi khi bạn upload hình ảnh lên một bài đăng hoặc trang. Không có thiết lập đặc biệt, không có tùy chọn để cấu hình, không có gì khó khăn - nó hoạt động ngay!

Giới thiệu

Dưới đây là bản xem trước của kết quả được tạo ra:

Sử dụng Instant gallery cho WordPress

Trước khi chúng ta đi vào code, hãy lướt xem gallery này sử dụng dễ dàng ra sao. Đối với những ai chỉ muốn lấy code và sử dụng nó, phần này sẽ chỉ cho bạn cách làm điều đó.

Đối với những người muốn tìm hiểu làm thế nào để tạo ra gallery này, vẫn đủ hữu dụng để hiểu được cách nó hoạt động trước khi chúng ta bắt đầu viết code. Vậy hãy xem qua nó!

Instant gallery: Hướng dẫn nhanh trong 2 phút

1. Bắt đầu với một bài đăng hoặc trang đơn giản, mới tạo trong WordPress. Nhấn nút "Upload/Insert Media".

2. Tiếp theo, upload một số hình ảnh lên Post hoặc Page. Chỉ cần kéo và thả hình ảnh của bạn vào hộp upload.

3. Khi hình ảnh của bạn upload hoàn tất, bạn sẽ có được một danh sách các hình ảnh và thuộc tính của chúng. Bạn có thể kéo và thả hình ảnh để sắp xếp lại chúng trên màn hình này. Instant Gallery tuân thủ thứ tự menu mà bạn đã thiết lập trong trình duyệt  WordPress media, vì vậy công việc sắp xếp lại các hình ảnh ở đây sẽ sắp xếp lại chúng trên gallery.

4. Nếu bạn muốn thay đổi bất kỳ thuộc tính nào của hình ảnh, chẳng hạn như Title, Caption hoặc Description, thì có thể làm điều đó như bạn thường làm. Trong phiên bản hiện tại, Instant gallery hiển thị Title hình ảnh trong Gallery ở giữa hình ảnh chính và thumbnail.

Tại sao hiển thị Title mà không phải thông tin khác? Như bạn có thể thấy từ hình ảnh, WordPress sẽ tự động điền vào Title của hình ảnh (sử dụng tên file của hình ảnh) ngay khi bạn upload nó lên. Để phù hợp với theme của Instant Gallery nhanh chóng và dễ dàng nhất có thể, tôi muốn dùng thông tin mà WordPress đã tự động bổ sung.

5. Cuối cùng, quay lại Post hoặc Page của bạn và nhập shortcode [Instant_gallery] trong khu vực nội dung. Nhấn Save, và sau đó xem trang của bạn. Thế đấy!

Vậy đó là mọi việc để kích hoạt nó! Mục đích của Instant Gallery là cách nhanh nhất, dễ nhất để tạo một gallery hình ảnh bằng cách upload hình ảnh lên Post hoặc Page trong WordPress. Nếu bạn nghĩ rằng nó sẽ hữu ích cho bạn, thì hãy tiếp tục lấy các file và vui với nó!

Bạn sẽ tạo ra các gallery hình ảnh WordPress đơn giản đẹp mắt ngay tức thì!

Chúng ta hãy xem xét thêm về thành phẩm:

Bây giờ, nếu bạn quan tâm tìm hiểu cách tạo Instant gallery, để cải thiện kỹ năng của bạn với tư cách là một lập trình viên, hoặc xây dựng dựa trên Instant gallery và làm cho nó tốt hơn, thì hãy đọc tiếp!

Tạo Instant Gallery

Giống đa số các dự án WordPress, chúng ta sẽ sử dụng HTML, CSS, PHP và một chút JavaScript để thực hiện mục tiêu của chúng ta.

Chúng tôi sẽ tiến hành theo cách sau:

1. HTML - Bắt đầu với markup và sau đó chèn nội dung tĩnh vào
2. WordPress/PHP - Tự động markup nội dung của chúng ta
3. JavaScript - Áp dụng behavior để chuyển đổi hình ảnh
4. CSS - Hoàn tất giao diện với CSS

Bước 1 Markup

Việc markup cho gallery của chúng ta là rất đơn giản. Chúng tôi chỉ có một thành phần chính bao bọc toàn bộ gallery (#instant-gallery), bảng nội dung chính chứa hình ảnh chính và tiêu đề của nó (#ig-main), sau đó là khu vực điều hướng chứa thumbnail (#ig-thumbs) .

1

2

  <div id="instant-gallery">

3

4

		<!-- Main Display Area -->

5

		<div id="ig-main">

6

7

				<!-- Main "Hero" Image -->

8

				<img id="ig-hero" src="https://placehold.it/600x300" />

9

10

				<!-- Image Title -->

11

				<p id="ig-title">Title Goes Here</p>

12

13

		<!-- Close the main display area -->

14

		</div>

15

16

		<!-- Open the Thumbnail navigation -->

17

		<ul id="ig-thumbs">

18

19

			<!-- Now, for each of the thumbnail images, label the LI with an ID of the appropriate thumbnail number -->

20

			<li id="ig-thumb-1">

21

22

				<!-- Output a thumbnail-sized version of the image -->

23

				<img class="thumb" src="http://placehold.it/150x150" />

24

25

			</li>

26

27

			<li id="ig-thumb-2">

28

29

				<img class="thumb" src="http://placehold.it/150x150" />

30

31

			</li>	

32

33

			<li id="ig-thumb-3">

34

35

				<img class="thumb" src="http://placehold.it/150x150" />

36

37

			</li>

38

39

		<!-- Close the thumbnail navigation list -->

40

		</ul>

41

42

	<!-- Close the entire Gallery -->

43

	</div>

Phần điều hướng của chúng ta là một danh sách không có thứ tự và mỗi item danh sách chứa một hình ảnh thu nhỏ.

Để đơn giản, chúng ta sẽ chỉ sử dụng ba thumbnail để giữ chỗ trong phiên bản HTML tĩnh. Trong phần tiếp theo, chúng ta sẽ sử dụng PHP để tự động tạo ra nhiều thumbnail như chúng ta cần.

Nếu chúng ta kiểm tra markup của chúng ta ngay bây giờ, chúng ta sẽ nhận được kết quả như thế này (chỉ hiển thị hai thumbnail để giảm kích thước hình ảnh xuống):

Vậy đó là markup cơ bản. Không quá thú vị, nhưng HTML đơn giản, gọn gàng là nền tảng của mọi thứ vì vậy thật xứng đáng dành thời gian để làm đúng mọi việc.

Bước 2 WordPress và PHP

Bây giờ chúng ta hãy đi vào phần WordPress của hướng dẫn. Đây có thể là phần thú vị nhất cho bạn đọc Wptuts+.

Hãy bắt đầu bằng cách suy nghĩ khái niệm về những gì chúng ta muốn thực hiện. Mục tiêu ở đây là tự động tạo ra một gallery ảnh khi upload hình ảnh vào post hoặc page bất kỳ.

Để thực hiện điều này, chúng ta cần biết những điều sau:

• Chúng ta đang ở post hoặc page nào?
• Có các hình ảnh đính kèm vào trang này không? Nếu có, hãy lấy vài thông tin về chúng.
• Sau đó, đối với hình ảnh đầu tiên, chúng ta muốn hiển thị nó trong gallery, cùng với caption (chú thích) hoặc nội dung mô tả.
• Sau đó, với tất cả các hình ảnh (bao gồm cả ảnh đầu tiên), chúng ta muốn hiển thị chúng dưới dạng thumbnail bên dưới gallery.
• Hình ảnh đầu tiên cũng cần được làm nổi bật để cho thấy rằng nó hiện đang được chọn.

Với ý tưởng nền tảng đó, chúng ta hãy xem code markup từ Bước 1, bây giờ được chèn vào code WordPress và PHP mà chúng ta cần để có được thông tin chúng ta muốn. Có một lượng lớn đang diễn ra ở đây, vì vậy hãy chia thành các phần nhỏ hơn tương ứng với danh sách trên.

Bước 2.1: Chuẩn bị câu truy vấn

1

2

//-------------------------------------------------

3

// Prepare the query

4

//-------------------------------------------------

5

6

	global $post;

7

8

	$args = array(

9

		'post_parent'    => $post->ID,			// For the current post

10

		'post_type'      => 'attachment',		// Get all post attachments

11

		'post_mime_type' => 'image',			// Only grab images

12

		'order'			 => 'ASC',				// List in ascending order

13

		'orderby'        => 'menu_order',		// List them in their menu order

14

		'numberposts'    => -1,					// Show all attachments

15

		'post_status'    => null,				// For any post status

16

	);

Ở đây chúng ta đang làm hai điều quan trọng:

Đầu tiên, chúng ta thiết lập biến Post toàn cục ($post) để chúng ta có thể có quyền truy cập vào dữ liệu liên quan về bài đăng của mình.

Thứ hai, chúng ta thiết lập một loạt các đối số ($args) xác định loại thông tin chúng ta muốn truy xuất. Cụ thể, chúng ta cần phải có được images (các hình ảnh) được attached (đính kèm) cùng post (bài viết) hiện tại. Chúng ta cũng sẽ lấy tất cả chúng và trả lại chúng theo cùng thứ tự chúng xuất hiện trong gallery WordPress.

Xem các chú thích trong đoạn code trên để xem dòng nào tương ứng với tham số nào.

Bước 2.2: Lấy các hình ảnh

1

2

	// Retrieve the items that match our query; in this case, images attached to the current post.

3

	$attachments = get_posts($args);

4

5

		// If any images are attached to the current post, do the following:

6

		if ($attachments) {	

7

8

			// Initialize a counter so we can keep track of which image we are on.

9

			$count = 0;

10

11

			// Now we loop through all of the images that we found 

12

			foreach ($attachments as $attachment) {

Ở đây chúng ta đang sử dụng hàm WordPress get_posts để truy xuất hình ảnh phù hợp với tiêu chí của chúng ta như được định nghĩa trong $args. Sau đó chúng ta sẽ lưu trữ các kết quả trong một biến gọi là $attachments.

Tiếp theo, chúng ta kiểm tra xem $attachments có tồn tại. Nếu biến rỗng (như trường hợp post hoặc page của bạn không có hình ảnh được đính kèm), thì sẽ code sẽ không thực thi nữa. Nếu $attachments có nội dung, thì chúng ta chuyển sang bước tiếp theo.

Tiếp theo, chúng ta khởi tạo một biến counter (đếm) đơn giản để chúng ta có thể theo dõi hình ảnh nào chúng ta đang xem. Chúng tôi làm điều này bởi vì có một số điều nhất định chúng ta sẽ chỉ muốn xuất ra lần đầu tiên thông qua vòng lặp của chúng ta (chẳng hạn như markup gallery chính). Nó cũng cho chúng ta một phương tiện để gán ID duy nhất cho mỗi thumbnail trong phần điều hướng nếu chúng ta muốn.

Sau đó, chúng ta mở loop để thực hiện cho từng hình ảnh.

Bước 2.3: Khu vực Galley chính

1

2

//---------------------------------------------------------

3

// Output the main containers and first large image; 

4

// This is stuff we will only want to output one time.

5

//---------------------------------------------------------

6

	if($count == 0) { ?>

7

8

		<!-- Whole Gallery container (includes thumbnails) -->

9

		<div id="instant-gallery">

10

11

			<!-- Main Display Area -->

12

			<div id="ig-main">

13

14

					<!-- Set the parameters for the image we are about to display. -->

15

					<?php $default_attr = array(

16

							'id' 	=> "ig-hero",

17

							'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),

18

							'title' => trim(strip_tags( $attachment->post_title )),

19

						);

20

					?>

21

22

					<!-- Display the first image attachment as the large image in the main gallery area -->

23

					<?php echo wp_get_attachment_image($attachment->ID, 'full', false, $default_attr); ?>

24

25

					<!-- Image Title -->

26

					<p id="ig-title">

27

28

					<!-- Display the Title of this image below the image -->

29

					<?php echo $attachment->post_title; ?>

30

31

					</p>

32

33

			<!-- Close the main display area -->

34

			</div>

35

36

			<!-- Open the Thumbnail navigation -->

37

			<ul id="ig-thumbs">

38

39

	<!-- End the block of stuff that we only do for the first image  -->

40

	<?php } ?>

Ở đây chúng ta sử dụng biến counter của chúng ta để xác định bao nhiêu lần của vòng lặp đã xảy ra. Nếu đây là lần đầu tiên, $counter sẽ bằng 0 và code ở trên sẽ được thực thi. Mã này thiết lập các thành phần chính cấu trúc chính nên gallery và đưa hình ảnh lớn đầu tiên vào phần hình chính. Điều này chỉ xảy ra một lần. Đối với lần tiếp theo của vòng lặp, $counter lớn hơn 0 và code này sẽ bị bỏ qua.

Ok, vậy thực sự những gì đang diễn ra ở đó? Chúng ta đã xem phần HTML trong Bước 1, vì vậy hãy tập trung vào code PHP nằm trong khu vực gallery chính.

1

2

	<!-- Set the parameters for the image we are about to display. -->

3

	<?php $default_attr = array(

4

			'id' 	=> "ig-hero",

5

			'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),

6

			'title' => trim(strip_tags( $attachment->post_title )),

7

		);

8

	?>

9

10

	<!-- Display the first image attachment as the large image in the main gallery area -->

11

	<?php echo wp_get_attachment_image($attachment->ID, 'full', false, $default_attr); ?>

12

13

	<!-- Image Title -->

14

	<p id="ig-title">

15

16

	<!-- Display the Title of this image below the main image -->

17

	<?php echo $attachment->post_title; ?>

18

19

	</p>

Trong phần đầu tiên ở đây, chúng ta định nghĩa một mảng các tham số giống như chúng ta đã làm trong Bước 2.1. Tuy nhiên, lần này, thay vì thiết lập tham số cho một câu truy vấn, chúng ta thực hiện điều đó cho một hàm WordPress được gọi là wp_get_attachment_image.

Hàm này lấy file attachment hiện tại (hình ảnh hiện tại của chúng ta), trả về kích thước đầy đủ của hình ảnh (trái ngược với kích thước nhỏ hơn của Thumbnail; chúng ta sẽ xem vấn đề đó sau) và áp dụng các thuộc tính cho thẻ HTML hình ảnh tương ứng đến các đối số được xác định trong mảng $default_attr. Thẻ "alt" và "title" của hình ảnh được xác định như bạn muốn và hình ảnh được cấp ID của #ig-hero để chúng ta có thể dễ dàng chọn nó tiêu bằng CSS.

Cuối cùng, chúng ta xuất lại tiêu đề của hình ảnh, lần này là Title xuất hiện bên dưới hình ảnh. Theo mặc định, WordPress đặt Title hình ảnh bằng với tên file của hình ảnh được upload lên. Vì vậy, khi bạn sử dụng kỹ thuật này, (1) hãy đảm bảo tên file của hình ảnh bạn upload lên là thứ bạn muốn hiển thị trên slideshow của mình, (2) chỉnh sửa Title của hình ảnh khi bạn upload lên hoặc (3) nhận xét phần này của code để title hoàn toàn không hiển thị trong trình chiếu.

Bước 2.4: Điều hướng bằng thumbnail

1

2

	<!-- Open the Thumbnail navigation -->

3

	<ul id="ig-thumbs">

4

5

		<!-- End the block of stuff that we only do for the first image  -->

6

		<?php } ?> 

7

8

			<!-- Now, for each of the thumbnail images, label the LI with an ID of the appropriate thumbnail number -->

9

			<li id="ig-thumb-<?php echo $count+1; ?>">

10

11

				<?php if ($count==0) {

12

13

					// If this is the first thumbnail, add a class of 'selected' to it so it will be highlighted

14

					$thumb_attr = array(

15

						'class' => "thumb selected",

16

						);

17

18

				} else {

19

20

					// For all other thumbnails, just add the basic class of 'thumb'

21

					$thumb_attr = array(

22

						'class' => "thumb",

23

						);

24

25

				} ?>

26

27

				<!-- Output a thumbnail-sized version of the image that has the attributes defined above -->

28

				<?php echo wp_get_attachment_image($attachment->ID, 'thumbnail', false, $thumb_attr); ?>

29

30

			</li>

31

32

				<!-- Increment the counter so we can keep track of which thumbnail we are on -->

33

				<?php $count = $count + 1; 

34

35

			} ?>

36

37

		<!-- Close the thumbnail navigation list -->

38

		</ul>

39

40

	<!-- Close the entire Gallery -->

41

	</div>

42

43

	<?php }

44

45

	} ?>

Bây giờ hãy xem xét kỹ hơn về điều hướng hình bằng thumbnail. Ở đầu code này, chúng ta đã lặp lại việc mở danh sách #ig-thumbs để giúp bạn tự định hướng trong code. Với ý đồ tham chiếu đó, chúng ta hãy nhìn vào các item danh sách thực tế.

Bạn sẽ nhận thấy rằng chúng ta đang sử dụng một đoạn PHP ngắn để xuất biến $count, cộng thêm một, để cung cấp cho mỗi item trong danh sách có ID riêng của nó. Điều này sẽ gia tăng mức độ kiểm soát đối với các item trong danh sách bằng CSS, nếu chúng ta muốn. Chúng tôi sử dụng $count + 1 để không bắt đầu từ 0.

Trong danh sách các item, có một câu lệnh có điều kiện kiểm tra thêm một lần lặp lại vòng lặp mà chúng ta đang thực hiện. Như chúng ta đã làm một vài lần trước đây, chúng ta đang thiết lập một array; tuy nhiên, lần này nó là một thuộc tính cho thumbnail. Sự khác biệt ở đây là chúng ta đang thiết lập các tham số hơi khác nhau cho array, tùy thuộc vào liệu chúng ta đang ở lần đầu tiên trong vòng lặp.

Chúng tôi luôn cung cấp cho thumbnail một class là "thumb", nhưng trong lần đầu tiên qua vòng lặp, chúng ta cũng cung cấp cho thumbnail đầu tiên một class tên là "selected". Đây là điều chúng ta sẽ nhắm mục tiêu với CSS sau này để cung cấp trải nghiệm người dùng nhất quán.

Khi các thuộc tính $thumb_attr được đặt, chúng ta sử dụng lại wp_get_attachment_image để xuất hình ảnh. Điều quan trọng cần lưu ý lần này là chúng ta đang dùng phiên bản thumbnail của hình ảnh thay vì dùng hình kích thước đầy đủ đã chụp ở trên.

Sau đó, vì chúng ta ở cuối vòng lặp, chúng ta tăng bộ đếm của mình và bắt đầu lại vòng lặp. Khi chúng ta sử dụng hết tất cả các file attachment hình ảnh của mình, chúng ta sẽ kết thúc vòng lặp. Khi điều này xảy ra, chúng ta đóng lại unordered list (danh sách không thứ tự), sau đó là toàn bộ gallery container và sau đó là các câu lệnh điều kiện PHP của chúng ta.

Bước 2.5: Bổ sung Shortcode

Thật tuyệt vời khi code thành gallery hình ảnh của chúng ta, nhưng sẽ tốt hơn nữa nếu chúng ta có thể hiển thị gallery hình ảnh của mình! Tại thời điểm này, chúng ta vẫn không có cách nào để thực sự hiển thị kết quả trên Post hoặc Page của WordPress. Chúng tôi sẽ sửa nó ngay bây giờ, và may mắn là việc này thật dễ dàng!

1

2

	//-------------------------------------------------

3

	// Create the Shortcode for Instant Gallery

4

	//-------------------------------------------------

5

6

	add_shortcode('instant_gallery', 'instant_gallery');

Cảm giác thật tốt khi có được chiến thắng nhanh chóng sau đoạn code lớn nhiều Bước 2.4. Ở đây chúng ta chỉ định nghĩa một shortcode rất đơn giản để chúng ta có thể bổ sung gallery vào các post hoặc page của WordPress.

Việc này cần hàm gọi là 'Instant_gallery' được định nghĩa ở trên và tạo ra shortcode mới có cùng tên. Sau đó, chúng ta có thể chèn gallery vào các post hoặc page của mình bằng cách shortcode [Instant_gallery].

Có rất nhiều bài viết chuyên sâu về shortcodes, bao gồm một số bài viết hay ngay tại đây trên Wptuts+. Nếu bạn chưa quen với shortcodes, đây là một số chủ đề khởi điểm hay:

• Getting Started with WordPress Shortcodes
• WordPress Shortcodes: The Right Way
• Quick Tip: Using Shortcodes in Theme Development
• WordPress Shortcode API

Bước 2.6: Tổng hợp các ý nghĩ của chúng ta

Phù! Ok, vậy đó là tất cả các code cho gallery. Code chúng ta đã viết cho đến nay sẽ lấy danh sách các file attachment hình ảnh từ post hoặc page của WordPress hiện tại và sau đó tự động tạo một gallery theo markup mà chúng ta cung cấp. Shortcode sau đó cung cấp cho chúng ta một cách thuận tiện để chèn các phòng trưng bày của chúng ta vào bài viết hoặc trang của chúng ta.

Nếu chúng ta upload một số hình ảnh tuyệt vời những con cá ngựa và con sứa và sau đó kiểm tra kết quả của chúng ta, đây là những gì chúng ta sẽ có lúc này:

Từ quan điểm của WordPress, chúng ta đã làm những gì chúng ta cần làm. Tuy nhiên, nếu không có JavaScript, gallery sẽ không thực sự làm gì cả. Không có CSS, nó cũng sẽ trong không ổn. Vì vậy, hãy dành một phút để thẩm thấu những gì chúng ta đã làm cho đến nay, và sau đó chúng ta sẽ chuyển sang bước tiếp theo nơi chúng ta làm cho phòng trưng bày của chúng ta trở nên sống động!

Bước 3 JavaScript

Như bạn có thể chờ đợi, Instant Gallery dựa vào phép thuật của jQuery để đạt được mức độ tương tác cơ bản mà nó yêu cầu. Thực tế có cái này có hai phần. Đầu tiên là upload gallery jQuery vào theme một cách chính xác và thứ hai là code jQuery thực tế sẽ tạo ra behaviour chúng ta cần (cụ thể là, hoán đổi hình ảnh và title của hình ảnh khi nhấp vào thumbnail).

Cả hai phần này đều mang đến cơ hội tốt để tận dụng một số hiểu biết và thực tiễn tốt nhất về WordPress, vì vậy nếu bạn chưa quen dùng jQuery trong WordPress, hãy đặc biệt chú ý!

Bước 3.1: Sử dụng Enqueue Script để upload jQuery trong WordPress

Như bạn có thể biết, jQuery (cũng như nhiều gallery JavaScript khác) được upload sẵn WordPress. Để đơn giản, chúng ta sẽ sử dụng phiên bản jQuery đi kèm với WordPress cho ví dụ này.

Đây là cơ hội tốt để sử dụng chức năng wp_enqueue_script của WordPress. Đây là phương pháp "đúng" để upload các script trong WordPress. Nó đảm bảo rằng các script được upload tại địa điểm và thời gian thích hợp khi WordPress thực thi và tránh các xung đột.

Hàm wp_enqueue_script có thể gây bối rối, nhưng may mắn thay, có rất nhiều bài viết hay về nó. Dưới đây là một số tài nguyên hữu ích về wp_enqueue_script:

• How to Include JavaScript and CSS in Your WordPress Themes and Plugins
• Use Google-Hosted JavaScript Libraries (...still the Right Way) (Updated Dec. 2011)

1

2

	//-------------------------------------------------

3

	// Enqueue jQuery

4

	//-------------------------------------------------

5

6

	function wptuts_enqueue_jquery() {

7

8

		wp_enqueue_script('jquery');

9

10

	}

11

12

	// Only add the javascript if we are NOT on the admin screen

13

	add_action("wp_enqueue_scripts", "wptuts_enqueue_jquery", 11);

Lưu ý rằng chúng ta kèm chức năng này vào hook WordPress "wp_enqueue_scripts", upload tất cả các script đã được xử lý bởi "wp_enqueue_script". Sự khác biệt nhỏ ở đó, nhưng rất quan trọng!

Đây là một lưu ý quan trọng về wp_enqueue_scripts từ WP Codex:

Hook wp_enqueue_scripts (thay vì hook init mà nhiều bài viết tham khảo), chúng ta tránh việc đăng ký các chọn lựa thay thế jQuery trên trang quản trị, điều này sẽ khiến việc chỉnh sửa bài đăng (trong số những thứ khác) gặp vấn đề khi thường xuyên nâng cấp.

Bước 3.2: Sử dụng jQuery để khởi tạo Instant Gallery

Bây giờ chúng ta có thể chuyển sang code jQuery để thực hiện thay đổi hình ảnh và tiêu đề. Chúng ta chỉ cần code vài dòng để thực hiện điều này. Một số bạn thành thạo jQuery thậm chí có thể đề xuất một số cách hiệu quả hơn để hoàn thành công việc!

Như chúng ta đã làm với code WordPress trong Bước 2, chúng ta hãy tìm hiểu khái niệm này trước khi chúng ta tìm hiểu code. Khi chúng ta nhấp vào thumbnail, chúng ta muốn một vài điều xảy ra:

• Đầu tiên và quan trọng nhất, chúng ta muốn hoán đổi hình ảnh hiện có ở vị trí chính bằng một hình khác lớn hơn - hình tương ứng với thumbnail mà chúng ta đã nhấp vào.
• Thứ hai, chúng ta muốn thay thế title của hình ảnh cũ bằng hình ảnh tương ứng với hình ảnh mới. Chúng tôi sẽ làm điều này qua mô hình đặt tên file của WordPress. Chúng tôi sẽ nói về cách làm điều đó ngay sau đó.
• Thứ ba, chúng ta muốn làm nổi bật thumbnail tương ứng với hình ảnh lớn của chúng ta tại bất kỳ thời điểm nào. Như chúng ta đã thấy trong Bước 2.4 ở trên, cách thức chúng ta chỉ định hình này là thêm class 'selected' trên thumbnail hiện tại.
• Cuối cùng, khi một hình ảnh mới được chọn, chúng ta xóa class 'selected' khỏi tất cả các hình ảnh, sau đó thêm lại hình ảnh đó vào thumbnail vừa được chọn.

Vì vậy, với những hành động quan trọng đó, hãy xem nó trong thế nào trong jQuery:

1

2

	//-------------------------------------------------

3

	// Activate Instant Gallery

4

	//-------------------------------------------------

5

6

	function activate_instant_gallery() {

7

	?>

8

9

		<script>

10

11

			// Wrap the jQuery code in the generic function to allow use of 

12

			// the $ shortcut in WordPress's no-conflict jQuery environment

13

14

			( function ($) {

15

16

				$('#ig-thumbs').delegate('img','click', function(){		// When someone clicks on a thumbnail

17

18

					$('#ig-hero').attr('src',$(this).attr('src').replace('-150x150',''));	// Replace the Full Sized version of selected image

19

20

					$('#ig-thumbs li img').removeClass("selected");		// Remove "selected" class from all thumbnails

21

					$(this).addClass("selected");						// Add "selected" class to selected thumbnail

22

23

					$('#ig-title').html($(this).attr('alt'));			// Replace the Title with Title selected image				

24

				});

25

26

			})(jQuery);

27

28

		</script>

29

30

	<?php

31

	}

32

33

	// Hook into footer so gallery becomes active after page loads

34

	add_action('wp_footer','activate_instant_gallery');	

35

36

	?>

May mắn thay, code jQuery tương đối đơn giản và tương ứng tốt với danh sách các hành động cần có bên trên.

Code này được ghi chú lại khá tốt, vì vậy nếu bạn không hiểu một dòng, phần chú giải sẽ hữu dụng. Mặc dù vậy, hãy phân tích jQuery, từng dòng một (bỏ qua "hàm wrapper" cơ bản của (function ($) {}) mà chúng ta sẽ thảo luận sau đó).

Dòng bắt đầu $('#ig-thumbs').delegate xác định phạm vi của hàm. Nghĩa là bất cứ khi nào ai đó nhấp vào một đối tượng hình ảnh (img) bên trong một container có ID #ig-thumbs, sau đó thực hiện các hành động trong hàm.

Dòng tiếp theo, bắt đầu bằng $('#ig-hero'), xử lý việc hoán đổi thực sự của hình ảnh hiện tại của chúng ta với hình ảnh lớn tương ứng với thumbnail vừa được nhấp. Trong hàm jQuery này, thumbnail được nhấp được gọi là "this" vì nó là chủ đề của thao tác "click"; nó là thứ được nhấp vào để kích hoạt hàm.

Phương pháp để hoàn thành trao đổi hình ảnh tận dụng mô hình đặt tên file trong WordPress. Ví dụ: Khi bạn upload một hình ảnh có tên my-image.jpg, WordPress sẽ tạo ra một số kích cỡ khác nhau của hình ảnh đó. Một kích thước được tạo tự động sẽ là "Thumbnail" (thumbnail), theo mặc định, hình vuông 150x150 được cắt ra từ ảnh gốc của bạn. WordPress sẽ đặt tên file này là my-image-150x150.jpg. WordPress chỉ cần thêm "-150x150" vào cuối tên file của bạn, ngay trước phần mở rộng file.

Vì vậy, nếu chúng ta muốn thay thế một phiên bản thumbnail của một ảnh bằng phiên bản kích thước đầy đủ của hình ảnh đó, thì chúng ta chỉ cần xóa "-150x150" ra khỏi tên file. Đây là những gì jQuery của chúng ta đang làm để trao đổi hình ảnh.

Nếu chúng ta muốn thay thế thumbnail bằng một ảnh có kích thước khác của nó, nhưng không phải bản kích thước đầy đủ, chúng ta sẽ cần phải biết chính xác kích thước đó, và sau đó chúng ta có thể chuyển đổi chúng. Ví dụ: nếu chúng ta muốn chuyển đổi my-image-150x150.jpg cho hình ảnh kích thước trung bình 600x300, thì chúng ta sẽ chỉ sử dụng code jQuery để hoán đổi "-150x150" bằng "-600x300" và chúng ta sẽ còn lại my-image-600x300.jpg.

Tiếp theo, với dòng bắt đầu $('#ig-thumbs li img'), chúng ta chỉ cần xóa class CSS 'selected' khỏi tất cả các thumbnail, rồi dòng bên dưới thêm class 'selected' cho 'this', hình ảnh đã được nhấp vào.

Cuối cùng, với dòng bắt đầu bằng $('#ig-title'), chúng ta chuyển Title của hình ảnh cũ bằng của hình ảnh mới. Dòng này lấy nội dung của một phần tử có chứa ID của #ig-title

Bước 3.3: Sử dụng jQuery trong theo cách của WordPress

Bây giờ, vì chúng ta đang thực hiện tất cả các hoạt động này theo cách của WordPress, chúng ta nên biết về chi tiết quan trọng về cách WordPress tải jQuery.

WordPress chạy jQuery trong "no conflict mode" để tránh xung đột với các gallery JavaScript khác. Theo thuật ngữ thực hành, điều này có nghĩa là phím tắt $ hữu ích thường được sử dụng trong jQuery sẽ không hoạt động trong WordPress theo mặc định.

May mắn thay, chủ đề này đã được thảo luận đầy đủ. Nếu bạn quan tâm đến việc tìm hiểu thêm các lý do, thì Chris Coyier có một bài viết tuyệt vời Digging Into WordPress giải quyết chính xác vấn đề này. Đối với mục đích của bài viết này, chúng ta chỉ cần bọc hàm jQuery của mình trong một hàm chung để cho phép sử dụng lại phím tắt $trong đoạn code của chúng ta.

Cuối cùng, chúng ta thêm code này bằng cách sử dụng hook WordPress tích hợp - wp_footer - để upload tập lệnh chính xác và chỉ sau khi phần còn lại của trang được upload.

Với jQuery đã có, chúng ta hãy xem những gì chúng ta có cho đến nay. Bây giờ gallery của chúng ta đã có tính tương tác và nhấp vào một trong các thumbnail thay thế chính xác hình ảnh chính và title tương ứng. Trong hình ảnh ví dụ bên dưới, bạn có thể thấy rằng chúng ta đã nhấp vào thumbnail thứ hai và cả hình ảnh chính và title của nó đã được thay thế như chúng ta mong đợi.

Vậy nó đã hoạt động nhưng nó vẫn trông không đẹp. May mắn thay, chúng ta có thể sắp xếp mọi thứ với một số CSS cơ bản. Và đó là những gì chúng ta sẽ làm trong bước tiếp theo.

Bước 4 CSS

Bước 4.1: CSS cho Instant gallery

Bây giờ đã đến lúc tô vẽ sự sáng tạo của chúng ta và làm cho nó trông giống như một gallery hình ảnh thực tế. Vì trọng tâm chính của hướng dẫn này là chức năng WordPress và jQuery, tôi đã làm CSS cho gallery này cực kỳ đơn giản. Đây là code CSS cho gallery:

1

2

	/* Instant Gallery */

3

4

	#instant-gallery {

5

		overflow: hidden;

6

		display: block;

7

		width: 100%;

8

		margin-bottom: 1.5em;

9

	}

10

11

	/* Main Display Area */

12

13

	#ig-main {

14

		width: 100%;

15

	}

16

17

	#ig-hero {

18

	}

19

20

	#ig-title {

21

		margin-top: 1.5em;

22

		margin-bottom: 1.5em;

23

		line-height: 1.5em;

24

	}

25

26

	/* Thumbnails */

27

28

	#ig-thumbs {

29

		overflow: hidden;

30

		margin: 0;

31

	}

32

33

	#ig-thumbs li {

34

		margin-right: 1.5em;

35

		margin-bottom: 1.5em;

36

		float: left;

37

		display: block;

38

		cursor: pointer;

39

	}

40

41

	#ig-thumbs img {

42

		width: 75px;				/* Customize to change Thumbnail Width */

43

		height: 75px;				/* Customize to change Thumbnail Height */

44

		padding: 1px;

45

		border: 1px solid #ddd;

46

	}

47

48

	#ig-thumbs li img:hover,

49

	#ig-thumbs li img.selected {

50

		border: 1px solid #aaa !important;

51

	}

Không có gì quá phức tạp về CSS của chúng ta. Chỉ cần các selector và style cơ bản cần thiết để tạo gallery. Nếu bạn muốn sửa đổi CSS để làm cho gallery của bạn trở nên lạ mắt hơn một chút, tôi đã cung cấp tất cả các selector mà bạn sẽ cần.

Một điều cần chú ý ở đây là tôi đã giới hạn kích thước của thumbnail thành 75x75 thay vì kích thước 150x150 mà chúng ta đã truy xuất chúng từ WordPress. Kích thước 150x150 hơi quá lớn với thị hiếu của tôi; Tôi thích các thumbnail nhỏ hơn để bạn có thể đặt vừa vặn hơn trong gallery. Nếu bạn muốn sử dụng một kích thước khác, tất cả những gì bạn phải làm là thay đổi chiều rộng và chiều cao của thumbnail trên hai dòng được markup trên CSS.

Bước 4.2: Sử dụng Enqueue Style để upload CSS trong WordPress

Có lẽ thú vị hơn chính CSS là cách chúng ta sử dụng để upload nó. Chúng tôi chỉ có thể làm một thẻ liên kết đơn giản và hook nó vào header của chúng ta bằng cách sử dụng hook wp_head, nhưng có một cách tốt hơn.

Được gợi ý từ hàm enqueue_script mà chúng ta đã sử dụng để upload jQuery, chúng ta có thể sử dụng một hàm tương tự, wp_enqueue_style, để upload stylesheet của chúng ta. Như với enqueue_script, đây là cách ưa thích để upload biểu định kiểu trong WordPress. Thật tốt khi thực hành các kỹ thuật này ngay cả với các dự án đơn giản như thế này vì nó cho phép bạn tập trung vào việc hiểu kỹ thuật và lý do tại sao nó hoạt động mà không lo lắng về việc gỡ lỗi số lượng lớn code. Thực sự hài lòng trong khi làm một việc đơn giản!

1

2

	//----------------------------------------------------------------------

3

	// Import Stylesheet

4

	//----------------------------------------------------------------------

5

6

	function add_stylesheets() {

7

8

		// change this path to load your own custom stylesheet

9

		$css_path = WP_PLUGIN_URL . '/instant-gallery/instant-gallery.css';

10

11

		// registers your stylesheet

12

		wp_register_style( 'instantGalleryStyles', $css_path );

13

14

		// loads your stylesheet

15

		wp_enqueue_style( 'instantGalleryStyles' );

16

	}

17

18

	// Only add the stylesheet if we are NOT on the admin screen

19

	if (!is_admin()) add_action( 'wp_enqueue_scripts', 'add_stylesheets' );

Vì vậy, đó là cách bạn sử dụng wp_enqueue_style. Rất giống với enqueue_script. Bạn sẽ nhận thấy rằng cũng có một lệnh khác ở đây: wp_register_style. Hàm này chỉ cần đăng ký một file CSS với WordPress để sử dụng sau với wp_enqueue_style.

Bây giờ gallery ảnh của chúng ta cuối cùng trông tốt như chức năng của nó!

Hãy cùng nhau

Kiểm tra sản phẩm hoàn thiện

Nó trông rất đơn giản, và đó chính xác là những gì chúng ta muốn. Mục tiêu của gallery này là cách đơn giản nhất, nhanh nhất để tự động tạo gallery ảnh từ hình ảnh được upload lên post trên trang WordPress, không có gì khác!

Xin vui lòng xem bản demo trực tiếp của Instant Gallery cho WordPress trên trang web cá nhân của tôi.

Phần code hoàn tất quá dài để hiển thị đầy đủ ở đây, vì vậy xin vui lòng tải về các file nguồn (ở đầu bài viết) và tự mình xem xét mọi thứ.

Tổng kết

Chúng tôi vừa tạo một gallery hình ảnh nhanh chóng, đi cùng điều hướng thumbnail cho WordPress!

Xuyên suốt hướng dẫn này, tôi đã cố gắng hết sức để kết hợp các thực hành tốt từ markup rõ ràng, semantic CSS và thậm chí cả cách tạo stylesheet và javascript. Nếu bạn làm theo qua các bước, thì tôi hy vọng bạn đã học được một hoặc hai kỹ thuật mới. Nếu bạn chỉ ở đây để lấy code thành phẩm, tôi hy vọng bạn thấy nó hữu ích và bạn có thể tự tin sử dụng nó và với kiến ​​thức rằng bạn đang sử dụng một số code đơn giản được tạo ra bằng tình yêu.

Như với tất cả dự án code, luôn có cách để cải thiện. Nếu bạn có thể nghĩ ra bất kỳ cách nào để cải thiện code mạnh mẽ hơn, thì tôi hoan nghênh mọi phản hồi mang tính xây dựng trong các bình luận!

Tôi cũng hoan nghênh tất cả các đề xuất về cách cải thiện plugin và làm cho nó mạnh mẽ hơn. Tuy nhiên, tôi không hứng thú lắm về việc làm cho nó phức tạp hơn hoặc thêm hàng loạt các tính năng. Có rất nhiều gallery hình ảnh đầy đủ tính năng hiện có, và tôi muốn cái này vẫn đơn giản và thực hiện mục đích cụ thể.

Cuối cùng, tôi muốn cảm ơn Japh Thomson vì đã mang đến cơ hội để tôi viết cho Wptuts+, và cảm ơn Envato vì đã xây dựng một cộng đồng giáo dục tuyệt vời trên web. Quan trọng nhất, cảm ơn bạn đã đọc!

Tôi rất mong phản hồi của bạn, hãy cho tôi biết phần bình luận nếu bạn dùng Instant Gallery trên bất kỳ website nào của bạn!