워드프레스 굿스플로 알림톡 플러그인 개발

워드프레스를 사용하고 있긴 하지만 플러그인 개발 등에 대해서는 깊게 공부를 해본 적이 없어서 알림톡 플러그인을 잘 개발할 수 있을까 걱정을 했는데.. 닥치면 다 한다는 일념하에 무작정 플러그인 개발을 시작했는데 원하는대로 개발을 마칠 수가 있어서 너무나 다행이라고 생각하고 있다. 지난 주부터 개발을 했으니 실제 작업 기간은 5일 정도로 생각하면 될 듯 하다. 관리자 설정 페이지 만드는 것부터 모두 새로운 것이었으니.. 나름 선방한 게 아닌가 생각하며 위안을 삼고 있다.

기능은 위 설정 화면과 같이 각 결제 수단에 맞게 알림톡을 발송하는 것이다. 일반적인 환경이라면 좀 더 쉽게 개발을 할 수도 있었겠지만 아무래도 워드프레스 환경이다 보니 그에 맞춰서 개발하는 게 쉽지가 않았다. hook의 개념부터 공부를 했다고 하면 될  것 같다. Read More

[WP] 워드프레스에 키보드 단축키 추가 플러그인

현재 이 블로그에는 기본 워드프레스 단축키 외에 관리자페이지로 접속하는 키보드 단축키가 적용되어 있다. 키보드의 Q 를 타이핑하면 관리자페이지로 이동하고 관리자페이지에서 Q 를 타이핑하면 메인페이지로 이동한다. input, textarea, select 등에서는  Q 를 타이핑해도 이동이 되지 않는다. 아래는 플러그인의 코드이다.

<?php

/**
 * @package WP Keyboard Shortcut
 * @version 1.0
 */
/*
Plugin Name: WP Keyboard Shortcut
Plugin URI: https://ncube.net/
Description: This plugin add shortcut on WordPress.
Author: Seongho Jang
Version: 1.0
Author URI: https://ncube.net/
*/

add_action('wp_footer', 'add_footer_javascript', 100);
add_action('admin_footer', 'add_admin_footer_javascript', 100);

function add_footer_javascript() {
?>
<script type="text/javascript">
function processShortcut(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    if (event.altKey || event.ctrlKey || event.metaKey)
        return;
    switch (event.target.nodeName) {
        case "INPUT":
        case "SELECT":
        case "TEXTAREA":
            return;
    }
    switch (event.keyCode) {
        case 81: //Q
            window.location = "<?php echo home_url(); ?>/wp-admin";
            break;
    }
}
document.onkeydown = processShortcut;
</script>
<?php
}

function add_admin_footer_javascript() {
?>
<script type="text/javascript">
function processShortcut(event) {
    event = event || window.event;
    event.target = event.target || event.srcElement;

    if (event.altKey || event.ctrlKey || event.metaKey)
        return;
    switch (event.target.nodeName) {
        case "INPUT":
        case "SELECT":
        case "TEXTAREA":
            return;
    }
    switch (event.keyCode) {
        case 81: //Q
            window.location = "<?php echo home_url(); ?>";
            break;
    }
}
document.onkeydown = processShortcut;
</script>
<?php
}
?>

위 코드를 워드프레스 플러그인 디렉토리에 php 파일을 생성 후 붙여놓기 하고 관리자페이지에서 플러그인을 활성화 해주면 된다.

[WP] 포스트 상하단에 애드센스 광고 노출 플러그인

워드프레스 포스트 상하단에 구글 애드센스 광고를 출력하는 플러그인이다. 애드센스 광고 설정 기능은 제공하지 않는 단순한 기능의 플러그인으로 플러그인 적용 전 post-adsense.php 파일에서 자신의 애드센스 광고 설정을 해야 정상적으로 광고가 노출된다.

플러그인 : post-adsense.zip

<?php

/**
 * @package Post Adsense
 * @version 1.0
 */
/*
Plugin Name: Post Adsense
Plugin URI: https://ncube.net/
Description: This plugin prints Adsense Ads.
Author: Seongho Jang
Version: 1.0
Author URI: https://ncube.net/
*/

// Register js and style sheet.
add_action( 'wp_enqueue_scripts', 'register_post_adsense_style', 100 );
add_action( 'wp_enqueue_scripts', 'register_post_adsense_js', 100 );

/**
 * Register adsense Js
 */
function register_post_adsense_js() {
    wp_register_script('post-adsense-js', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
    wp_enqueue_script('post-adsense-js');
}

/**
 * Register style sheet.
 */
function register_post_adsense_style() {
    wp_register_style( 'post-adsense-style', plugins_url( 'post-adsense/style.css' ) );
    wp_enqueue_style( 'post-adsense-style' );
}

add_filter ('the_content', 'post_adsense_print', 100);

function post_adsense_print($content) {
    if(is_single()) {
        if(!$content)
            return $content;
        
        $top_ads = '<div id="adsense-post-top" class="adsense-post">
                        <ins class="adsbygoogle"
                            style="display:block"
                            data-ad-client="ca-pub-16166"
                            data-ad-slot="90868"
                            data-ad-format="auto"></ins>
                        <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>';
        $btm_ads = '<div id="adsense-post-bottom" class="adsense-post">
                        <ins class="adsbygoogle"
                            style="display:block"
                            data-ad-client="ca-pub-16166"
                            data-ad-slot="27266"
                            data-ad-format="auto"></ins>
                    <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                    </div>';
        
        $content = $top_ads . $content . $btm_ads;
    }

    return $content;
}
$top_ads와 $btm_ads 부분 에서 data-ad-client, data-ad-slot 값을 자신의 애드센스 설정으로 반드시 변경하셔야 합니다.

[WP] 워드프레스 포스트에 사진의 EXIF 정보 플러그인

포스트 내용 중에 포함된 사진의 EXIF 정보를 출력하기 위해 테마 파일에 추가했던 코드를 따로 빼서 플러그인으로 만들었다. 워드프레스 플러그인은 이번이 처음이라 제대로 한 것인지 자신은 없지만 일단 나중을 위해서라도 기록해두는 것이 좋을 듯 하여 포스팅한다.

이름은 대충 post-exif-info 라고 했다. 아래는 플러그인 파일의 코드이다.

<?php

/**
 * @package Post EXIF Info
 * @version 1.0
 */
/*
Plugin Name: Post EXIF Info
Plugin URI: https://ncube.net/
Description: This plugin prints exif infomation of photos in post.
Author: Seongho Jang
Version: 1.0
Author URI: https://ncube.net/
*/

require ( plugin_dir_path( __FILE__ ) . '/exif.lib.php' );

// Register style sheet.
add_action( 'wp_enqueue_scripts', 'register_exif_info_style', 100 );

/**
 * Register style sheet.
 */
function register_exif_info_style() {
    wp_register_style( 'post-exif-info', plugins_url( 'post-exif-info/style.css' ) );
    wp_enqueue_style( 'post-exif-info' );
}

add_filter ('the_content', 'print_exif_info', 100);

플러그인 : post-exif-info.zip

사용하는 테마에 따라서 사진의 EXIF 정보가 출력되지 않는 경우가 있을 수 있는데 이럴 경우 플러그인 exif.lib.php 파일의 get_post_photos 함수 중 아래 코드의 패턴을 수정해야 한다.

$pattern = '#<a href="([^"]+)"[^>]+><img[^>]+></a>#is';

워드프레스 플러그인 개발은 좀 더 살펴보고 싶다는 생각이 든다.

 

2017.11.15 추가
ngx_pagespeed 모듈을 서버에 적용했더니 위의 정규식 $pattern 형태가 일치하지 않아 아래처럼 $pattern 값을 아래처럼 변경

$pattern = '#<a href="([^"]+)"[^>]*>.*<img[^>]+></a>#i';

pagespeed 모듈의 설정을 변경하면 또 이래야할 것 같은데.. 큰 일이다.