PHP

[WordPress] カスタムフィールドの値を元に特定のページでリダイレクトする方法

2017年10月13日
<?php/** * 外部リンクページのリダイレクト処理 */function oc_template_redirect() { if ( is_page() ) { $status = 302; $location = ""; $post_id = get_queried_object_id(); // 外部サイトへリダイレクトするためのカスタムフィールドを取得 $location = get_post_meta($post_id, "oc_external_link_url", true); // 空でなければリダイレクト（状況によってはURLの文字列チェック等がいるかも） if(!empty($location) ) { wp_redirect( $location, $status ); exit; } }}add_action( 'template_redirect', 'oc_template_redirect' );
PHP

[WordPress] 新着情報表示用ショートコード

2017年10月10日
<?php/** * お知らせショートコード * 使用例： [topics_list count=10 cat_slug="news" ] */function oc_topics_list( $atts ) { $settings = shortcode_atts( array( 'cat_slug' => '', 'count' => 10, 'post_type' => 'post', ), $atts ); $html = ""; $args = array( 'posts_per_page' => $settings["count"], 'orderby' => 'date', 'order' => 'desc', 'post_type' => $settings["post_type"], 'post_status' => 'publish' ); if( !empty($settings["cat_slug"]) ) { $args["category_name"] = $settings["cat_slug"]; } $topics = get_posts( $args ); foreach($topics as $topic) { $date = get_the_time("Y年m月d日",$topic); $cats = get_the_category($topic->ID); $url = get_permalink($topic); $title = get_the_title($topic); $html .= "<li> <span class='date'>{$date}</span> <span class='content'><a href='{$url}'>{$title}</a></span> </li>"; } return "<ul class='topics-list'>{$html}</ul>";}add_shortcode( 'topics_list', 'oc_topics_list' );
PHP

WordPressのプラグインで、get_template_part的なものを使いたい

2017年9月4日
<?php// wp-content/plugins/wp-onocom-plugin.php class wp_onocom_plugin { static $instance = null; function __construct(){ self::$instance = $this; } public static function get_instance() { if( self::$instance != null ) { return self::$instance; } else { return new self(); } } public function get_plugin_template_part($slug, $name = null) { $templates = array(); $name = (string) $name; if ( '' !== $name ) $templates[] = "{$slug}-{$name}.php"; $templates[] = "{$slug}.php"; $located = ''; foreach ( (array) $templates as $template_name ) { if ( !$template_name ) { continue; } if ( file_exists($this->get_plugin_path() . '/' . $template_name) ) { $located = $this->get_plugin_path() . '/' . $template_name; break; } } if($located) { require_once( $located ); } } public function get_plugin_url() { return plugins_url("",__FILE__); } public function get_plugin_path() { return dirname(__FILE__); }}
PHP

WordPress TinyMCEのスタイルメニューの項目追加

2017年8月30日
<?phpif ( !function_exists( 'initialize_tinymce_styles' ) ):add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);function initialize_tinymce_styles($init_array) { $style_formats = array( array( 'title' => '否定', 'inline' => 'span', 'classes' => 'text-negative' ), array( 'title' => '肯定', 'inline' => 'span', 'classes' => 'text-positive' ), array( 'title' => '例示・用語', 'inline' => 'span', 'classes' => 'text-example' ), array( 'title' => '強調', 'inline' => 'strong', 'classes' => 'text-emphasis' ), array( 'title' => '区切り線', 'block' => 'hr', 'classes' => 'hr-divider' ), ); $init_array['style_formats'] = json_encode($style_formats); return $init_array;}endif;
PHP

WordPress/PHP 投稿IDを元に固有のCSSグラデーションを生成するコード

2017年8月29日
<?phpfunction onocom_code_gradient( $post_id = false ) { global $post; if( $post_id == false ) { $post_id = $post->ID; } // 投稿日時のUnix Epoch (1970 年 1 月 1 日 0 時 0 分 0 秒) からの秒数から係数を求める $seed = ( get_the_time("U",$post_id) * $post_id ); $seed = '0.' . substr($seed,-5,5); if($seed < 0.5){ $seed *= 2; } $start = sprintf("#%06x", 0xcccccc * $seed ); $end = sprintf("#%06x", 0xFFFFFF * $seed );?><style>/* セレクタは適宜変更すること */.single #post-<?php echo $post_id; ?> .entry-header { background: <?php echo $start;?>; background: -webkit-linear-gradient(to right, <?php echo $start;?>, <?php echo $end;?>); background: linear-gradient(to right, <?php echo $start;?>, <?php echo $end;?>);</style><?php}
PHP

WordPressのfunctions.phpでまとめてタクソノミー登録

2017年8月29日
<?phpadd_action('init', 'onocom_custom_taxonomies');function onocom_custom_taxonomies() { $post_type = 'item'; $taxonomies = array( "taxslug-a" => "タクソノミーA", "taxslug-b" => "タクソノミーB", "taxslug-c" => "タクソノミーC", "taxslug-d" => "タクソノミーD", "taxslug-e" => "タクソノミーE", "taxslug-f" => "タクソノミーF", ); foreach ($taxonomies as $key => $label) : $labels = array( 'hierarchical' => true, 'label' => $label, 'query_var' => true ); register_taxonomy( $key, $post_type, $labels ); endforeach;}?>
JavaScript

three.jsで立方体を回転させる

2017年8月28日
(function(){ 'use strict'; var scene; var object_cube; var light_ambient , light_direction; var camera; var renderer; var width = 600; // 全画面にしたい場合：window.innerWidth; var height = 400; // 全画面にしたい場合：window.innerHeight; init(); animate(); function init() { // scene --------------------------------------------------- // シーンに対してオブジェクト、ライト、カメラを配置する。 scene = new THREE.Scene(); // scene.fog : 霧効果・・・奥に行くほど霧がかって映る // scene.fog = new THREE.Fog(0x990000, 1000,2000); // object ----------------------------------------------- // THREE.Mesh ： ポリゴンメッシュオブジェクトを生成 // new THREE.Mesh(Geometry：形,Material：素材) object_cube = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), // new THREE.MeshLambertMaterial({color: 0x00a0e8}) ); object_cube.position.set(0,0,0); scene.add(object_cube); // light ----------------------------------------------- // 環境光 ************ // THREE.AmbientLight ： 環境光・・・オブジェクトの全ての面を均等に照らすライト。影が出来ない。 // new THREE.AmbientLight(光の色,光の強さ[省略可]) light_ambient = new THREE.AmbientLight( 0xffffff , 1 ); scene.add(light_ambient); // 平行光源 ************ // THREE.DirectionalLight ： 平行光源・・・特定の方向へのライト。影が出来る。 // new THREE.DirectionalLight(光の色,光の強さ[省略可]) light_direction = new THREE.DirectionalLight( 0xffffff, 1 ); // DirectionalLightの位置 light_direction.position.set( 50, 10, 5); // DirectionalLightの対象オブジェクト light_direction.target = object_cube; scene.add(light_direction); // camera -------------------------------------------------- camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(200,100,300); camera.lookAt(scene.position); // renderer ------------------------------------------------ renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width,height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById("stage").appendChild(renderer.domElement); renderer.render(scene, camera); } function animate() { // window.requestAnimationFrame:再描画のタイミングで指定した関数が呼び出される // https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame requestAnimationFrame( animate ); render(); } function render() { object_cube.rotation.x += 0.01; // x軸方向に回転 object_cube.rotation.y += 0.01; // y軸方向に回転 object_cube.rotation.z += 0.01; // z軸方向に回転 console.log("object_cube.rotation : " , object_cube.rotation); // 再描画 renderer.render(scene, camera); }})();
JavaScript

three.jsで立方体を表示する

2017年8月28日
(function(){ 'use strict'; var scene; var object_cube; var light_ambient , light_direction; var camera; var renderer; var width = 600; // 全画面にしたい場合：window.innerWidth; var height = 400; // 全画面にしたい場合：window.innerHeight; init(); function init() { // scene --------------------------------------------------- // シーンに対してオブジェクト、ライト、カメラを配置する。 scene = new THREE.Scene(); // scene.fog : 霧効果・・・奥に行くほど霧がかって映る // scene.fog = new THREE.Fog(0x990000, 1000,2000); // object ----------------------------------------------- // THREE.Mesh ： ポリゴンメッシュオブジェクトを生成 // new THREE.Mesh(Geometry：形,Material：素材) object_cube = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), // new THREE.MeshLambertMaterial({color: 0x00a0e8}) ); object_cube.position.set(0,0,0); scene.add(object_cube); // light ----------------------------------------------- // 環境光 ************ // THREE.AmbientLight ： 環境光・・・オブジェクトの全ての面を均等に照らすライト。影が出来ない。 // new THREE.AmbientLight(光の色,光の強さ[省略可]) light_ambient = new THREE.AmbientLight( 0xffffff , 1 ); scene.add(light_ambient); // 平行光源 ************ // THREE.DirectionalLight ： 平行光源・・・特定の方向へのライト。影が出来る。 // new THREE.DirectionalLight(光の色,光の強さ[省略可]) light_direction = new THREE.DirectionalLight( 0xffffff, 1 ); // DirectionalLightの位置 light_direction.position.set( 50, 10, 5); // DirectionalLightの対象オブジェクト light_direction.target = object_cube; scene.add(light_direction); // camera -------------------------------------------------- camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); camera.position.set(200,100,300); camera.lookAt(scene.position); // renderer ------------------------------------------------ renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width,height); renderer.setClearColor(0xefefef); renderer.setPixelRatio(window.devicePixelRatio); document.getElementById("stage").appendChild(renderer.domElement); renderer.render(scene, camera); }})();
HTML

Foundation Height Adjust

2017年8月25日
<div class="grid-x" data-equalize-on="medium" data-equalizer="foo"> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo" data-equalizer="bar" data-equalize-on-stack="true"> <h3>Parent panel</h3> <div class="callout" data-equalizer-watch="bar"> <p>The three callouts in this panel will equalize, even when stacked.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> <div class="callout" data-equalizer-watch="bar"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> </div> <div class="medium-4 columns"> <div class="callout panel" data-equalizer-watch="foo"> <p>Where these panels will not equalize on stack, and instead equalize on medium up.</p> </div> </div> <div class="medium-4 columns"> <div class="callout" data-equalizer-watch="foo"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div></div>