Skip to content

Instantly share code, notes, and snippets.

@tanshio
Last active June 27, 2017 16:04
Show Gist options
  • Save tanshio/1623dc9c81c5d2eb42e98cf26b232cb8 to your computer and use it in GitHub Desktop.
Save tanshio/1623dc9c81c5d2eb42e98cf26b232cb8 to your computer and use it in GitHub Desktop.
その場で編集くん
<?php
// wp_headの前に追加
// wp_deregister_script('jquery') をしていると表示されないので注意
// 一応ログインしていないと表示しないようにする
if (current_user_can('editor') || current_user_can('administrator')) {
wp_enqueue_script( 'wp-api' );
}
?>
<?php wp_head(); ?>
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
/* Start the Loop */
while ( have_posts() ) : the_post(); ?>
<article id="editor">
<h1><?php the_title(); ?></h1>
<div class="entry-content" v-html="compiledMarkdown">
<?php the_content(); ?>
</div>
<?php if (current_user_can('editor') || current_user_can('administrator')) :?>
<textarea :value="input" @input="update"></textarea><button @click="send">送信</button>
<?php endif; ?>
</article>
<?php endwhile;?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php if (current_user_can('editor') || current_user_can('administrator')) :?>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script>
var $html;
jQuery.ajax( {
url: '/wp-json/wp/v2/posts/'+ <?php echo get_the_ID(); ?>,
method: 'GET'
}).done(function(res){
$text = res.content.rendered;
init()
})
function init() {
new Vue({
el: '#editor',
data: {
input: $text
},
computed: {
compiledMarkdown: function () {
return marked(this.input, { sanitize: false })
}
},
methods: {
update: _.debounce(function (e) {
this.input = e.target.value
console.log(marked(this.input))
}, 300),
send: function(){
var that = this
jQuery.ajax( {
url: wpApiSettings.root + 'wp/v2/posts/<?php echo get_the_ID(); ?>',
method: 'POST',
beforeSend: function ( xhr ) {
xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
},
data:{
'content' : marked(that.input)
}
} ).done( function ( response ) {
console.log( response );
} );
}
}
})
}
</script>
<?php endif; ?>
<?php get_footer();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment