Thủ thuật WordPress tự động canh giữa hình ảnh bài viết – Có thể nói wordpress một mã nguồn mở khá mạnh mẽ với sự hỗ trợ xây dựng một website, blog trong vài phút – Nếu bạn đang sử dụng mã nguồn này thì trong quá trình sử dụng bạn cũng gặp một số trường hợp không như mong muốn.
Một trong những vấn đề mà blog thủ thuật giới thiệu dưới đây nếu bạn có gặp phải thì hãy áp dụng phương pháp này để chỉnh sửa lại nhé – Có thể nói giao diện là thành phần rất quan trọng của blog – Và trong nội dung bài viết hình ảnh là một phần không thể thiếu nhưng không biết vì sao khi chèn hình ảnh vào bài viết cho dù bạn đã canh giữa thì hình ảnh vẫn không hiển thị như ý của bạn vậy phải làm sao? – Trường hợp này xảy ra với một số “Theme” chứ không phải tất cả, hãy cùng blog thủ thuật tìm cách khắc phục vấn đề nêu trên!
Thủ thuật WordPress tự động canh giữa hình ảnh trong bài viết
Đầu tiên hãy đăng nhập vào trang quản trị blog của mình sau đó chọn Giao diện > Công cụ biên tập
Tiếp tục, nhìn sang menu bên trái và tìm file “Style.css” và Kích chọn
Cuối cùng hãy dán toàn bộ đoạn code sau đây vào cuối file sau đó bạn nhớ lưu cài đặt lại!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/* =WordPress Core ————————————————————– */ .alignnone { margin: 5px 20px 20px ; } .aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 20px 20px; } .alignleft { float:left; margin: 5px 20px 20px ; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float:right; margin: 5px 20px 20px; } a img.alignnone { margin: 5px 20px 20px ; } a img.alignleft { float:left; margin: 5px 20px 20px ; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px ; } .wp-caption.alignleft { margin: 5px 20px 20px ; } .wp-caption.alignright { margin: 5px 20px 20px; } .wp-caption img { border: none; height: auto; margin:; max-width: 98.5%; padding:; width: auto; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:; padding: 4px 5px; } |
Sau khi lưu lại – bạn quay ra trang chủ và xem kết quả nhé!
Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!
Cách hợp nhất hoặc chia nhỏ các tập tin PDF đơn giản
Cách chèn mặt cười vui nhộn dành cho wordpress
Đã kiểm tra, thêm các đoạn code có wp-caption (không có text) nhưng không được.
Vậy mình hướng dẫn cách xác định thuộc tính đó nhé!
Bạn chuột phải vô trang Web sau đó chọn kiểm tra (hoặc nhấn Ctrl + Shift + I) sau đó hãy xác định khối caption và lúc này bạn sẽ thấy thuộc tính của nó và bạn hãy thay đổi thuộc tính là được! (dùng trình duyệt Google Chrome hoặc cốc cốc!
Mình có một trang WP là www.daycon.com.vn – Hiện tại đang gặp một sự bất tiện là khi viết caption cho ảnh nội dung, đoạn caption đó bị căn trái. Mình muốn nó tự căn giữa thì phải làm thế nào bạn? (Căn giữa đoạn mô tả cho ảnh chứ không phải ảnh).
Hiện nay mình bỏ qua cái caption của ảnh và tự chèn thêm một dòng dưới ảnh để làm mô tả, chọn căn lề giữa. 🙁
Cho liên kết mình xem thử bạn 😛
Bạn hãy thử chèn Caption vào hình ảnh và sau đó đưa link bài viết mình xem thử 😛
Trang của mình đang hoạt động nên không test thử được. Trong WP có Chú thích và Mô tả cho ảnh. Khi nhập nội dung vào đó, dù đã chọn căn giữa nhưng không thể hiển thị là căn giữa mà nó bị căn trái.
Bởi lẽ mỗi caption của mỗi theme sẽ khác nhau vì thế nếu không có mẫu rất khó xác định thuộc tính của nó bạn ak? bạn có thể vào file Style.css của theme và tìm xem từ khóa “wp-caption-text” nếu có hãy thay đổi thuộc tính text-align là Center nhé 😛
Admin ơi em dán vào rồi nhưng vẫn không được ạ
Chào bạn – Vậy bạn hãy vào tập tin style.css của theme bạn đang dùng và tìm đoạn code tương tự và sửa lại nhé!
div#largecol div#interior_wrapper img {
float: left; /* đổi left thành center bạn nhé */
display: inline;
padding: 3px;
background-color: #fff;
margin: 5px 15px 0px 0px;
}
Chúc bạn thành công!
Nếu không tìm thấy bạn hãy thêm đoạn mã này vô tập tin style.css thử nhé – Và khi viết bạn phải canh giữa hình ảnh nhé!
.aligncenter {
margin: 15px auto;
display: block;
text-align: center;
}