Hướng dẫn chi tiết cách thêm hình ảnh, Video, âm thanh vào bài viết

Bằng cách thêm hình ảnh vào bài viết hoặc trang có thể làm cho nội dung của bạn thêm sinh động, có chiều sâu và cuốn hút. Có những nội dung không thể diễn đạt bằng văn bản thuần tuý mà phải dùng đến hình ảnh mới có thể gây ấn tượng đối với người đọc. Thông qua hình ảnh trực quan bạn có thể  tạo sự chú ý đến nội dung của bạn và cải thiện việc truyền thông điệp đến độc giả của mình.

Tương tự như hình ảnh, bạn có thể thêm các tập tin video và audio vào bài viết và trang của mình. Video cho phép bạn cung cấp hình thức giao tiếp sinh động, audio cho phép bạn nói chuyện, tâm sự với khách truy cập. Có rất nhiều trang web sử dụng video và audio để đăng tin và phát sóng trên internet.

Trong bài viết này bạn sẽ khám phá cách cải thiện nội dung trên trang của bạn bằng cách thêm hình ảnh, video, âm thanh. Và thậm chí bạn còn muốn tạo một slide ảnh trên trang web của mình. Tất cả những điều này có thể thực hiện được thông qua phần mềm WordPress.org và thư viện đa phương tiện tích hợp.

Bạn thêm những tính năng mở rộng này trong khu vực Upload/Insert của trang Add New Post. Bạn có thể thêm chúng vào lúc bạn viết bài hoặc để sau đó thêm cũng được. Sự lựa chọn là ở bạn.

Thêm hình ảnh vào bài viết của bạn

Để thêm hình ảnh vào bài viết, bạn dùng trình upload ảnh trong WordPress. Nhấp vào nút Add Media, cửa sổ Insert Media sẽ mở ra để bạn lựa chọn hình ảnh từ đĩa cứng hoặc từ internet.

Để thêm hình ảnh từ một URL trên internet, nhấp vào nút Add Media và làm theo các bước sau:

1. Nhấp vào liên kết Insert from URL trong cửa sổ Insert Media.

Cửa sổ Insert from URL sẽ xuất hiện.

2. Nhập địa chỉ URL của hình ảnh vào trong hộp văn bản URL.
   
   Nhập đầy đủ đường dẫn URL của hình ảnh, bao gồm cả các phần http và www của địa chỉ. Bạn có thể dễ dàng tìm thấy địa chỉ URL của bất kỳ hình ảnh nào trên internet băng cách nhấp chuột phải vào hình ảnh và chọn Properties từ menu ngữ cảnh.
3. Nhập tên bạn muốn hiển thị cho hình ảnh trong hộp Link Text.
4. Nhấp vào nút Insert into Post.

Để thêm hình ảnh từ máy tính, bạn cũng nhấp vào nút Add Media và làm theo các bước sau:

1. Nhấp vào liên kết Add Media sau đó nhấp vào nút Select Files.

Một hộp thoại mở ra và bạn có thể chọn một hoặc nhiều hình ảnh từ đĩa cứng của mình.

2. Chọn hình ảnh bạn muốn thêm sau đó nhấp vào Open.

Hình ảnh sẽ được upload từ máy tính của bạn vào thư mục Media trên máy chủ. WordPress hiển thị một thanh theo dõi tiến trình upload và hiển thị các tuỳ chọn khi việc upload hoàn thành.

3. Chỉnh sửa chi tiết cho hình ảnh bằng cách cấu hình các tuỳ chọn hiển thị phía bên phải của cửa sổ
4.  Insert Media.
   

Sau khi hình ảnh được tải lên, phía bên phải của cửa sổ Insert Media chứa các tuỳ chọn:

• URL: Địa chỉ trực tiếp đến hình ảnh vừa tải lên. Nó không thể chỉnh sửa.
• Title: Nhập vào tên của hình ảnh.
• Caption: Nhập vào tiêu đề bạn bạn muốn hiển thị cho hình ảnh.
• Alt Text: Nhập vào tên thay thế cho hình ảnh. Khi hình ảnh chưa tải kịp nó sẽ hiển thị tên này. Tên này thường chứa từ khoá nếu nó là ảnh tiêu biểu.
• Description: Mô tả cho hình ảnh.
• Alignment: Chọn None, Left, Center, hoặc Right.
• Link To: Chọn liên kết cho hình ảnh. Đây là liên kết của trang mà bạn muốn điều hướng độc giả đến thăm khi họ nhấp vào hình ảnh. Nhập URL của bạn hoặc chọn một trong bốn giá trị sẵn có: None (Nếu bạn không muốn độc giả nhấp vào hình ảnh), Media File (Người đọc có thể nhấp trực tiếp vào hình ảnh), Attachment Page (Người đọc có thể nhấp vào hình ảnh để đến một bài viết nào đó), hoặc Custom URL (Người đọc có thể nhấp vào hình ảnh để đến một URL mà bạn nhập vào).
• Size: Chọn Thumbnail, Medium, Large, hoặc Full Size.

WordPress sẽ tự động tạo phiên bản thu nhỏ của hình ảnh mà bạn upload lên. Một thumbnail là một phiên bản nhỏ của ảnh gốc. Bạn có thể chỉnh sửa kích thước của ảnh thumbnail bằng cách nhấp vào liên kết Settings và sau đó nhấp vào Media. Trong phần Image Size section, nhập vào chiều cao và chiều rộng bạn muốn của ảnh thu nhỏ, ảnh vừa được tạo ra bởi WordPress.

Nếu bạn upload nhiều hơn 01 ảnh, hãy đi đến phần “Chèn một thư viện ảnh” trong phần tiếp theo của bài viết này.

4. Nhấp vào liên kết Edit Image phía bên phải của ảnh thumbnail để chỉnh sửa cách nó xuất hiện. Sau khi bạn chỉnh sửa xong, hãy nhấp nút Save.
   
   Trình chỉnh sửa ảnh bao gồm các tuỳ chọn như sau:
5. Crop: Cắt xén ảnh xuống kích thước nhỏ hơn.
6. Rotate counterclockwise: Xoay ảnh về phía trái.
7. Rotate clockwise: xoay hình về phía phải.
8. Flip vertically: Lật hình lộn ngược và xoay lại.
9. Flip horizontally: Lật hình từ phải qua trái và xoay lại.
10. Undo: Hoàn tác các thay đổi bạn vừa thực hiện.
11. Redo: Chỉnh sửa lại hình ảnh mà bạn đã hoàn tác.
12. Scale Image: Cho phép bạn cài đặt chiều rộng và chiều cao cụ thể cho hình ảnh.

5. Nhấp vào nút Insert into Post để thêm ảnh vào bài viết

Bạn có thể tìm thấy nút Insert into Post ở phía bên dưới của cửa sổ Insert Media. Cửa sổ upload hình ảnh sẽ đóng lại và trở về trang Add New Post. WordPress đã chèn mã HTML để hiển thị hình ảnh trên bài viết, trang của bạn; bạn có thể tiếp tục chỉnh sửa bài viết của mình, lưu nó lại hoặc xuất bản nó.

Căn chỉnh hình ảnh của bạn

Khi bạn upload hình ảnh, bạn có thể căn chỉnh hình ảnh của bạn với các tuỳ chọn: None (không), Left (trái), Center (giữa), hoặc Right (phải). Tất nhiên là WordPress Themes bạn đang sử dụng sẽ không có các kiểu căn chỉnh này mặc định trong stylesheet của nó. Nếu bạn căn chỉnh hình ảnh nằm bên trái nhưng hình ảnh trên trang của bạn không căn chỉnh như mong muốn, bạn cần thêm một vài style vào stylesheet của mình.

Chúng ta sẽ thảo luận về Themes và Template một cách chi tiết trong các bài viết sau, nhưng để đảm bảo rằng hình ảnh của bạn được căn chỉnh đúng, hãy tham khảo các mẹo dưới đây

1. Nhấp vào liên kết Edit trong trình đơn Apperance.

Trang Edit Themes sẽ mở ra. Tất cả các tập tin trong WordPress Themes của bạn sẽ được liệt kê phía bên phải của trang.

2. Nhấp vào khuôn mẫu Stysheet

Khuôn mẫu Stylesheet (style.css) mở ra trong hộp văn bản bên trái của trang.

3. Thêm kiểu mẫu bạn mong muốn vào khuôn mẫu.

Dưới đây là các style dùng để căn chỉnh hình ảnh:

• None: img.alignnone {margin: 5px 0 5px 0;}
• Left: img.alignleft {float: left; margin: 5px 10px 5 px 0px;}
• Center: img.alignright {display: block margin: 5px auto;}
• Right: img.alignright {float: right; margin: 5px 0 50px 10px;}

Chèn thư viện hình ảnh

Bạn cũng có thể dùng trình Media Upload của WordPress để chèn một thư viện ảnh vào bài viết trên blog của mình. Tải lên thư viên ảnh trong cửa sổ Insert Media. Sau đó thay vì nhấp vào nút Insert into Post, bạn hãy nhấp vào liên kết Create Gallery bên trái của trang Insert Media. Liên kết này sẽ mở ra cửa sổ Create Gallery cùng với các hình ảnh mà bạn đã tải lên.  Kích chọn các hình ảnh bạn muốn chèn vào thư viên ảnh, sau đó làm theo các bước dưới đây:

1. Nhấp vào nút Create a New Gallery nằm ở góc dưới bên phải của cửa sổ Create Gallery.

Thao tác này sẽ mở ra cửa sổ Edit Gallery.

2. Chỉnh sửa hình ảnh trong thư viện (không bắt buộc)

Nếu bạn muốn sắp xếp lại hình ảnh, bạn có thể kéo và thả các hình ảnh theo thứ tự mà bạn mong muốn chúng hiển thị trên trang web của mình. Bạn cũng có thể viết chú thích ngắn gon cho hình ảnh bằng cách nhấp vào hộp văn bản phía dưới ảnh và nhập vào tiêu đề mình muốn.

3. Cấu hình Gallery Settings

Nếu bạn nhìn sang phía bên phải của cửa sổ Edit Gallery, bạn sẽ thấy có 03 tuỳ chọn:

✓ Link To: Dùng menu xổ xuống để chọn Attachment Page, Media Page hoặc None.

✓ Columns: Chọn số cột bạn muốn ảnh thu nhỏ của thư viện hiển thị. Tuỳ chọn này cũng nằm trong một menu xổ xuống có giá trị từ 1 đến 9.

✓ Random Order: Theo mặc định, tuỳ chọn này không được chọn. Nếu bạn kích chọn tuỳ chọn này, WordPress sẽ sắp xếp thứ tự ngẫu nhiên cho các hình ảnh.

✓ Size: Menu xổ xuống này sẽ cho phép bạn chọn kích cỡ mong muốn của hình ảnh: Thumbnail, Medium, Large hoặc Full Size.

4. Nhấp vào nút Insert Gallery

WordPress sẽ chèn vào bài viết của bạn một đoạn mã ngắn có dạng: “[shortcode]”.

Bảng dưới liệt kê một số shortcodes bạn có thể dùng để thiết lập cài đặt hiển thị cho thư viện ảnh một cách thủ công:

5. Thay đổi thứ tự hiển thị của hình ảnh trong thư viện bằng cách dùng thẻ HTML và vùng chọn CSS.

• captiontag: Thay đổi khung viền bao quanh chú thích của hình ảnh bằng các shortcode.
• icontag: Định nghĩa khung viền bao quanh các ảnh thumbnail trong thư viện của bạn.
• itemtag: Tạo khung viền bao quanh tất cả các ảnh trong thư viện.
• order: Tạo thứ tự hiển thị đối với các hình ảnh trong thư viện của bạn.

6. Định nghĩa style cho thẻ <span> trong CSS Stylesheet của bạn

Thẻ <span> tạo ra một phần tử inline (nội dòng). Một phần tử chứa trong thẻ <span> ở trên cùng một dòng. Bạn cần biết một chút kiến thức CSS để thay đổi thẻ <span>.

Bạn nhấp vào menu Appearance » Editor trên WordPress Dashboard để chỉnh sửa khuôn mẫu cho giao diện của mình. Dưới đây là đoạn mã bạn có thể tham khảo và thêm vào stylesheet (style.css) cho giao diện hiện tại của mình.

span.gallery‐icon img

{ padding: 3px;

background: white;

border: 1px solid black;

margin: 0 5px; }

Copy và dán đoạn mã trên vào tập tin style.css của WordPress Themes mà bạn đang dùng để để nó tự động thêm một đường viền màu đen cho mỗi ảnh thumbnail.

7. Nhấp vào nút Update File để lưu lại khuôn mẫu stylesheet của bạn.

Cho dù bạn tự sản xuất video hay chèn video thú vị từ các nguồn khác thì việc thêm video vào bài viết trong WordPress rất dễ dàng.

Có rất nhiều thư viện video cho phép bạn nhúng video vào nội dung bài viết trên blog của bạn. Youtube là một dịch vụ điển hình như thế.

Để thêm video từ internet, bạn nhấp vào nút Add Media sau đó nhấp vào liên kết Insert from URL và làm theo các bước sau:

1. Nhập URL của tập tin video

Nhập đầy đủ URL của video bao gồm cả http và www. Các trang như Youte thường cung cấp URL trên trang của họ. Bạn chỉ cần sao chép và dán vào là được.

2. Nhập tiêu đề của video vào ô Title

Bạn nên nhập tiêu đề môt tả ngắn gọn cho video giúp độc giả của bạn biết được nội dung của video.

3. Nhấp vào nút Insert into Post

Một liên kết đến video được chèn vào bài viết của bạn. WordPress không nhúng trực tiếp video vào bài viết của bạn, nó chỉ chèn liên kết đến video. Khách truy cập nhấp vào liên kết để xem video trên một trang khác.

Các bước trên cho phép bạn chèn một liên kết đến video mà khách truy cập có thể nhấp vào và xem trên một trang khác. WordPress cũng có một tính năng vô cùng tiện lợi được gọi là Auto‐Embed. Tính năng này tự động chèn video vào bài viết và trang của bạn. Khi bạn nhập URL của video vào bài viết của bạn, WordPress tự động phát hiện xem URL đó có phải là URL của một tập tin video từ Youtube hay không. Sau đó nó tự động nhúng mã HTML quanh URL để đảm bảo rằng trình phát video hiển thị trong bài viết của bạn theo tiêu chuẩn và XHTML phù hợp.

Bạn không cần phải kích hoạt tính năng Auto-Embed này, vì nó đã được kích hoạt tự động.

Hiện tại WordPress tự động phát hiện và chèn video từ các dịch vụ lưu trữ video như: blip.tv, DailyMotion, Flickr, FunnyOrDie.com, Hulu, Instagram, Photobucket, PollDaddy, Rdio, Revision3, Scribd, SlideShare, SmugMug, SoundCloud, Spotify, Twitter, Vimeo, YouTube, và WordPress.tv. Bạn có thể tìm hiểu danh sách đầy đủ các dịch vụ video có thể nhúng vào WordPress tại địa chỉ http://codex.wordpress.org/Embeds.

Để upload và xuất bản video từ máy tính của mình, nhấp vào nút Add Media trên trang Edit Post hoặc Add New. Sau đó làm theo các bước sau:

1. Nhấp vào nút Select File. Hộp thoại Open sẽ mở ra.
2. Chọn tập tin video bạn muốn upload sau đó nhấn Open (hoặc nhấp đúp vào video)

Bạn trở lại cứa sổ Upload trong WordPress, lúc này nó sẽ hiển thị thanh tiến trình tải lên của video. Khi quá trình Upload hoàn thành một cửa sổ chứa các tuỳ chọn sẽ hiện ra.

3. Nhập tiêu đề cho tập tin vào hộp văn bản Title.

4. Nhập chú thích cho tập tin vào hộp văn bản Caption

5. Nhập mô tả cho tập tin vào hộp văn bản Desription

6. Chọn Attachment Display Settings

Trong trình đơn Attachment Display Settings xổ xuống, bạn có thể chọn:

✓Embed Media Player: Nhúng trình phát đa phương tiện tức là nhúng tập tin video vào trình phát đa phương tiện trên trang của bạn.

✓Link to Media File: Liên kết tới tập tin Media.

✓Link to Attachment Page: Liên kết tới trang cung cấp dịch vụ lưu trữ video.

7. Nhấp vào nút Insert into Post

Chèn tập tin audio vào bài viết của bạn

Tập tin audio có thể là nhạc hoặc tập tin bạn thu âm cho độc giả của mình. Audio là cách tuyệt vời để tương tác với độc giả. Bạn có thể dễ dàng chia sẻ lên blog của bạn bằng cách sử dụng tính năng Upload Audio trong WordPress. Sau khi bạn thêm audio vào blog của mình, độc giả của bạn có thể nghe nó trên máy tính của họ hoặc tải về máy nghe nhạc để nghe trong những lúc rảnh rỗi.

Nhấp vào nút Add Media trên trang Edit Post hoặc Add New Post và làm theo các bước sau để chèn audio vào blog của bạn:

1. Nhấp vào nút Select Files để mở hộp thoại Open.

2. Chọn tập tin bạn muốn Upload và nháp Open (hoặc kích đúp vào tập tin)

Bạn trở lại cửa sổ uploader trong WordPress, nó sẽ hiển thị một thanh tiến trình trong khi bạn đang upload tập tin audio. Khi hoàn thành việc upload, một cửa sổ chứa các tuỳ chọn sẽ xổ xuống.

3. Nhập tiêu đề cho tập tin audio trong hộp văn bản Title.

4. Nhập chú thích cho tập tin trong hộp văn bản Caption.

5. Nhập mô tả của tập tin trong hộp văn bản Description

6. Cấu hình Attachment Display Settings.

✓Embed Media Player: Nhúng trình phát đa phương tiện tức là nhúng tập tin audio vào trình phát đa phương tiện trên trang của bạn.

✓Link to Media File: Liên kết tới tập tin audio

✓Link to Attachment Page: Liên kết tới trang cung cấp dịch vụ lưu trữ audio.

7. Nhấp vào nút Insert into Post

Nếu bạn đã viết blog trong một thời gian dài, có thể bạn sẽ quên các tập tin mà mình đã tải lên WordPress. Tôi đã phải đăng nhập vào tài khoản trên Web Hosting và thông qua giao thức FTP mới có thể nhìn thấy các tập tin mà mình đã tải lên. Nhưng bây giờ, WordPress Media Library làm cho mọi thứ trở nên đơn giản và vô cùng tiện lợi. Nó giúp bạn có thể dễ dàng tìm kiếm các tập tin mà bạn đã tải lên.

Để tìm tập tin hình ảnh, video và âm thanh mà bạn đã tải lên để sử dụng cho bài viết mới, trong cửa sổ Add New Post bạn làm theo các bước sau:

1. Nhấp vào nút Add Media để mở cửa sổ Insert Media.
2. Nhấp vào liên kết Media Library ở phía trên
   Tại đây bạn sẽ thấy tất cả các tập tin mà mình đã upload
3. Chọn tập tin bạn muốn tái sử dụng và nhấp vào nó.
4. Cài đặt các tuỳ chọn cho tập tin như: Tiêu đề, chú thích, mô tả, địa chỉ URL, thứ tự, Căn chỉnh và kích cỡ.
5. Nhấp vào nút Insert into Post

WordPress sẽ sinh ra mã HTML và chèn nó vào bài viết của bạn.

Nếu bạn chỉ muốn xem tất cả các tập tin bạn đã tải lên chứ không cần tìm nó để tái sử dụng bạn có thể nhấp vào liên kết Library trong menu Media để mở trang Media Library. Theo mặc định trang Media Library sẽ hiển thị tất cả các tập tin mà bạn đã tải lên. Nhưng bạn có thể nhấp vào Image, Audio hoặc Video để hiển thị kiểu tập tin mà bạn mong muốn.

Bạn có thể thực hiện các thao tác sau trong trang Media Library:

✓ Filter media files by date: Nếu bạn muốn xem tất cả các tập tin được tải lên vào tháng 9 năm 2017, chọn thời gian từ trình đơn xổ xuống. Trang Media Library sẽ tải lại và bạn sẽ nhìn thấy những tập tin được tải lên vào tháng 9 năm 2017.

✓ Search media files using a specific keyword: Tuỳ chọn này cho phép bạn tìm kiếm tập tin theo từ khoá. Bạn hãy nhập từ khoá vào ô Search menu items… và nhấn Enter. Trang Media Library sẽ tải lại và nó sẽ chỉ hiển thị những tập tin có chứ từ khoá mà bạn đã nhập.

✓ Delete media files: Nhấp vào hình ảnh bạn muốn xoá, cửa sổ Attachment Detail sẽ hiện ra. Nhấp vào liên kết  Delete Permanently, WordPress sẽ hiển tra bảng cảnh báo “You are about to permanently delete this item. ‘Cancel’ to stop. ‘OK’ to delete — click OK to permanently delete the file.” Nhấp Cancel để huỷ, nhấp OK để xoá vĩnh viễn tập tin.
✓ View media files: Trên trang Media Library, nhấp vào ảnh thu nhỏ của tập tin mà bạn muốn xem. Hình ảnh sẽ được hiển thị trên trang Attachment Details.

Tổng kết:

Qua bài viết này, bạn đã biết cách chèn các tập tin đa phương tiện vào bài viết của mình để làm cho nó thêm sinh động và cuốn hút. Trong bài viết tiếp tôi sẽ hướng dẫn các bạn cách cài đặt plugin cho WordPress nói chung và các plugin hay dành cho việc thêm, quản lý các tập tin đa phương tiện trên trang của bạn.

Nếu bạn thấy thích bài viết đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo của Series Hướng dẫn WordPress cơ bản./.