[WordPress]投稿日から●●日以内の記事にNEWマークを付けるためのチェック関数

<?php// NEWを表示する日数を指定define("NEWEST_POST_DAYS", 7); /** * 記事にNEWを付けるか判定する処理 */function is_newest_post($the_post) { // NEWを付加する日数 $days = NEWEST_POST_DAYS; // 記事投稿後の経過日数 $today = date_i18n('U'); $posted = get_the_time('U',$the_post->ID); $elapsed = date('U',($today - $posted)) / (60*60*24) ; // NEWを付加する日数よりも経過日が小さければtrueを返す if( $days > $elapsed ){ return true; } else { return false; }}

[jQuery]手軽に実装する上に戻るボタン。最初は非表示である程度スクロールすると表示される機能付き。

$(document).ready(function(){ $(window).scroll(function() { if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタンを表示 $(".back-to-top").fadeIn(); } else { $(".back-to-top").fadeOut(); } }); $(".back-to-top").click(function() { $("body,html").animate({scrollTop:0},800); // 800msかけて上に戻る });});

[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

<div class="bg-image-loop"></div>.bg-image-loop { width: 100%; height: 160px; /* 画像の高さを指定 */ position: relative; background: url("//onocom.net/code/wp-content/uploads/2018/01/loop_bg.png") repeat-x 0 0; background-size: auto 100%; animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */ margin: 80px 0; padding: 0;}@keyframes bg-slider { from { background-position: 0 0; } to { background-position: -1518px 0; } /* 1518pxとは使用した背景画像の長さ */}

[CSS]下にスクロールしろという案内をふわふわアニメートするCSS

<p class="scroll-announce">下にスクロールしてね</p>body { background: #000; color: #fff; min-height: 1000px;}.scroll-announce { text-align: center; position: relative;}.scroll-announce:after { font-size: 40px; font-weight: bold; display: block; text-align: center; content: "↓"; position: absolute; left: 50%; left: calc( 50% - 24px ); bottom: -100px; width: 48px; animation: scroll-announce 3s ease infinite;}@keyframes scroll-announce { 0% { transform:translateY(0) } 70% { transform:translateY(-15px) } 100% { transform:translateY(0) }}

[Bootstrap]ナビゲーションをAffixさせる際にスライドインする処理

<div class="navbar" data-spy="affix" data-offset-top="60"> Header Navigation</div><div class="empty-field"></div>.navbar { background: #000; color: #fff; padding: 15px 0; text-align: center;}.navbar.affix-top { position: static; top: -120px;}.navbar.affix { position: fixed; top: 0px; width: 100%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; opacity: 0.95;}body { /* Affixをわかりやすくするためにグラデーションつける */ background-color: #F07575; /* fallback color if gradients are not supported */ background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */}.empty-field { height: 1000px;}

WordPressのカテゴリー・タクソノミー等のアーカイブページの接頭辞を削除する

<?phpadd_filter( 'get_the_archive_title', function ($title) { if ( is_category() ) { /* translators: Category archive title. 1: Category name */ $title = sprintf( __( '%s' ), single_cat_title( '', false ) ); } elseif ( is_tag() ) { /* translators: Tag archive title. 1: Tag name */ $title = sprintf( __( '%s' ), single_tag_title( '', false ) ); } elseif ( is_author() ) { /* translators: Author archive title. 1: Author name */ $title = sprintf( __( '%s' ), '<span class="vcard">' . get_the_author() . '</span>' ); } elseif ( is_year() ) { /* translators: Yearly archive title. 1: Year */ $title = sprintf( __( '%s' ), get_the_date( _x( 'Y', 'yearly archives date format' ) ) ); } elseif ( is_month() ) { /* translators: Monthly archive title. 1: Month name and year */ $title = sprintf( __( '%s' ), get_the_date( _x( 'F Y', 'monthly archives date format' ) ) ); } elseif ( is_day() ) { /* translators: Daily archive title. 1: Date */ $title = sprintf( __( '%s' ), get_the_date( _x( 'F j, Y', 'daily archives date format' ) ) ); } elseif ( is_tax( 'post_format' ) ) { if ( is_tax( 'post_format', 'post-format-aside' ) ) { $title = _x( 'Asides', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-gallery' ) ) { $title = _x( 'Galleries', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-image' ) ) { $title = _x( 'Images', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-video' ) ) { $title = _x( 'Videos', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-quote' ) ) { $title = _x( 'Quotes', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-link' ) ) { $title = _x( 'Links', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-status' ) ) { $title = _x( 'Statuses', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-audio' ) ) { $title = _x( 'Audio', 'post format archive title' ); } elseif ( is_tax( 'post_format', 'post-format-chat' ) ) { $title = _x( 'Chats', 'post format archive title' ); } } elseif ( is_post_type_archive() ) { /* translators: Post type archive title. 1: Post type name */ $title = sprintf( __( '%s' ), post_type_archive_title( '', false ) ); } elseif ( is_tax() ) { $tax = get_taxonomy( get_queried_object()->taxonomy ); /* translators: Taxonomy term archive title. 1: Taxonomy singular name, 2: Current taxonomy term */ $title = sprintf( __( '%2$s' ), $tax->labels->singular_name, single_term_title( '', false ) ); } else { $title = __( 'Archives' ); } return $title;});

ボックスの左上に三角形の新着(NEW表示)を表示するCSS

.mark-box { width: 200px; height: 200px; position: relative; padding: 30px; background-color: #fef2f2;}.mark-box:before { position: absolute; content: ""; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: #f00 transparent transparent transparent;}.mark-box:after { position: absolute; content: "NEW"; transform: rotate(315deg); display: block; font-size: 11px; white-space: pre; color: #fff; top: 12px; left: 4px; text-align: center; z-index: 2; line-height: 1.2;}

Beaver Builderでカスタムカラーを設定する

<?php// functions.phpに定義する// ---------------------------------------------------------------------------// ページビルダー用カラープリセットの定義// ---------------------------------------------------------------------------function oc_builder_color_presets( $colors ) { $colors[] = '7BA964'; $colors[] = '1CAFE4'; $colors[] = 'FA573D'; return $colors;}add_filter( 'fl_builder_color_presets', 'oc_builder_color_presets' );

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

<?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' );

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

<?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' );

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

<?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__); }}

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

<?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;

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

<?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}

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

<?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;}?>

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

(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); }})();

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

(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); }})();

Foundation Height Adjust

<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>