У меня еще не было времени сделать плагин WordPress.
фон
Иногда, когда я собирался поговорить об API, я искал толпу пользователей, когда увидел Liqi.io веб-сайт.
Они использовали плагин sentence marker, созданный иностранным разработчиком в 2015 году, чтобы реализовать функцию маркировки и комментирования, нажав на предложение в статье.
На том же носителе также есть маркировка предложений, что весьма полезно.
Возросло взаимодействие, посетители также могут участвовать в нем.
Код
Если у вас не было времени разобраться с этим, сначала опубликуйте код.
// Content data is saved in custom fields of the current article
$stream_ids = get_post_meta($post->ID,'stream_ids',true);
$stream_contents = get_post_meta($post->ID,'stream_contents',true);
$stream_users = get_post_meta($post->ID,'stream_users',true);
$stream_users = explode('######',$stream_users);
$stream_ids = explode('######',$stream_ids);
$stream_contents = explode('######',$stream_contents);
$count1 = count($stream_ids);
$count2 = count($stream_contents);
$count3 = count($stream_users);_ Получение помеченного контента из заголовка страницы статьи
_ Блок комментариев для отображения страницы статьи
_ Основная функция jQuery код страницы статьи
_ Обработка страницы статьи Содержимое разметки jQuery Код
function send_post_mark_comment() {
if(!empty($_POST['content']) && !empty($_POST['post_id']) && !empty($_POST['user_id']) && !empty($_POST['stream_id'])) {
$content = addslashes($_POST['content']);
$post_id = (int)$_POST['post_id'];
$user_id = (int)$_POST['user_id'];
$stream_id = (int)$_POST['stream_id'];
if(get_post_status($post_id) !== false){
$old_ids = get_post_meta($post_id,'stream_ids',true);
$old_contents = get_post_meta($post_id,'stream_contents',true);
$old_users = get_post_meta($post_id,'stream_users',true);
if(!empty($old_ids) && !empty($old_contents)){
$status = update_post_meta($post_id,'stream_ids',$old_ids.'######'.$stream_id);
$status = update_post_meta($post_id,'stream_users',$old_users.'######'.$user_id);
$status = update_post_meta($post_id,'stream_contents',$old_contents.'######'.$content);
}else{
$status = update_post_meta($post_id,'stream_ids',$stream_id);
$status = update_post_meta($post_id,'stream_users',$user_id);
$status = update_post_meta($post_id,'stream_contents',$content);
}
if($status !== false){
echo json_encode(array('stats'=>'1'));
}else{
echo json_encode(array('stats'=>'0'));
}
}else{
echo json_encode(array('stats'=>'0'));
}
die();
}
}
// Add the interface to init
add_action('init', 'send_post_mark_comment');_ Функция действия отправки комментария
.new-single-comment-btn{
float: right !important;
border: 2px solid #959da5 !important;
background-color: #fff !important;
box-shadow: none !important;
border-radius: 5px !important;
padding: 12px 12px 11px 15px !important;
text-align: center !important;
text-shadow: none !important;
color: #959da5 !important;
margin: 0px !important;
margin-top: -5px !important;
}
.new-single-comment-avatar{
width: 40px;
height: 40px;
margin-left: -2px;
margin-right: 13px;
border-radius: 50%;
}
.new-single-div-author{
position: absolute;
right: 0px;
top: -54px;
padding: 6px 20px;
font-family: sans-serif;
font-size: 1.8rem;
border-radius: 50px;
box-shadow: 0 0.125rem 0.75rem 0 rgba(0,0,0,.08);
}
.new-p-under{
text-decoration: underline dashed rgb(253, 188, 1) !important;
}
.new-p-undered{
text-decoration: underline dashed rgb(253, 188, 1) !important;
}
.new-single-comment-fixed{
display: none;
position: fixed;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
border: none;
transform: translateX(820px);
margin-top: 22.1vh;
width: 35vh;
top: 0px;
background: rgb(255, 255, 255);
}
.new-single-comment-fixed input{
border: none;font-size: 1.4rem;font-weight: 400;font-family: sans-serif;color: #666;height: 55px;padding-left: 20px; border-left: 5px solid rgb(253, 188, 1);
}
.new-single-comment-p{
font-size: 1.2rem !important;
margin: 5px 0 !important;
color: #888;
text-decoration: none !important;
}
.new-single-comment-img{
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
margin: 0px !important;
display: inline-block !important;
border-radius: 50% !important;
margin-right: 7px !important;
margin-left: -5px !important;
margin-top: -4px !important;
}
.underline-ps{
background: rgb(252, 188, 1);
color: rgb(255, 255, 255);
font-style: normal;
font-size: 1rem;
padding: 1px 10px;
font-weight: 600;
border-radius: 5px;
margin-left: 5px;
}
.new-single-comment-div{
padding: 0px 20px 0px 20px;
border-left: 5px solid rgb(238, 238, 238);
transition: ease-in-out .2s;
}
.new-single-comment-div h4{
font-weight: 600;
font-size: 1.9rem;
color: #666;
margin-bottom: 3px;
}
.new-single-comment-div-list{
padding: 10px 0px;
padding-left: 0px;
border-top: 1px solid #eee;
max-height: 50vh;
overflow: hidden;
overflow-y: auto;
transition: ease-in-out .2s;
}
.new-cap-tags{
margin-top: -20px;
}
.new-cap-tags a{
position: relative;
display: inline-block;
height: 30px;
padding: 0 15px;
font-size: 1.7rem;
line-height: 30px;
color: rgb(0, 132, 255) !important;
vertical-align: top;
border-radius: 100px;
background: rgba(0, 132, 255, 0.1);
}
.new-single-comment-fixed-cap{
box-shadow: 0 1px 4px rgba(0,0,0,.2);
border: none;
background: rgb(255, 255, 255);
transform: none !important;
display: block !important;
margin-top: 30px !important;
margin-left: 44px !important;
width: 100%;
position: relative;
}_CSS раздел
скриншот
Эпилог
Я, вероятно, пока не собираюсь помещать его в тему Тони (в этом нет необходимости), позже это может быть плагин WordPress 2333