У меня еще не было времени сделать плагин 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