×

Shortcode code editor HTML/CSS cho WordPress tương tự W3schools

Shortcode code editor HTML/CSS cho WordPress tương tự W3schools
Editor code hiển thị trong bài viết khi bạn thêm vào

Chia sẻ shortcode code editor HTML/CSS tương tự với W3schools 

Code này sẽ giúp cho các bạn hiển thị nội dung code HTML/CSS của mình lên bài viết một cách trực quan, người dùng sẽ dễ dàng hiểu hơn.
Để sử dụng shortcode này, bạn chỉ cần sao chép toàn bộ code bên dưới, sau đó dán vào file functions.php trong thư mục theme mà bạn đang sử dụng

function show_code_caodem($args, $content) {
ob_start(); ?>
<style>
br { display: none; }
textarea, iframe{
display: block;
width:100%;
border:1px solid #555;
box-shadow: 0px 1px 4px #ccc;
border-radius:5px;
}
#nut-showcode{
background:#333;
color:#fff;
padding:10px 20px 10px 20px;
border-radius:5px;
font-weight:bold;
font-size:18px;
margin:20px 0px 20px 0px;
}
#nut-showcode:hover{opacity:0.7}
#myframe{background:#fff;height:300px;border-radius:5px;}
</style>


<script>
function updateIframe(){
var myFrame = jQuery("#myframe").contents().find('body');
var textareaValue = jQuery("textarea").val();
myFrame.html(textareaValue);
}
</script>
<textarea rows="10" cols="50"><?php echo $content; ?></textarea>
<button id="nut-showcode" style="border:0" type="button" onclick="updateIframe()">TEXT CODE</button>
<iframe id="myframe"></iframe>
<?php
return ob_get_clean();
}
add_shortcode('showcode', 'show_code_caodem');
Shortcode code editor HTML/CSS cho WordPress tương tự W3schools
Ở bài viết, bạn sử dụng block HTML để viết nội dung muốn hiển thị [showcode] nội dung code cần hiển thị [/showcode]

1206
"Nếu bạn cảm thấy bài viết này hữu ích, bạn có thể ủng hộ cho tác giả một tách Cafe"
THANH TOÁN ỦNG HỘ
Sacombank
NGUYEN NGOC HOAN
040086597979
Đọc thêm bài khác
×
Chia sẻ trang này tới
QR:  Shortcode code editor HTML/CSS cho WordPress tương tự W3schools