小金井にあるWEB制作会社の備忘録

WordPress（ワードプレス）での投稿時にハイフンを連続して記載する機会があったのですが、セキュリティーの観点から禁止されていたので解決方法をメモ。 「-」（ハイフン）を「-」と置き換えて投稿 投稿画面でハイフンを文字コード「-」に置き換えて記載。記載する際にはエディタモードを「コードエディタ」に切り替えて作業を行います。尚、コードブロック内では問題なく表記されます。

ワードプレスを使用する際に、新たにカスタム投稿を追加をせずに投稿を「新着情報」として使用することが多いですが、そのままの名前で運用すると分かりにくいとお声をいただいた際に対応したメニューの名称（ラベル）の変更方法をメモ。 functions.php（PHP） 「functions.php」に以下の内容を追記します。 function change_my_post_menu_label() { global $menu; global $submenu; $menu[5][0] = '新着情報'; $submenu['edit.php'][5][0] = '新着情報一覧'; $submenu['edit.php'][10][0] = '新着情報追加'; $submenu['edit.php'][15][0] = '新着情報カテゴリー'; //カテゴリを変更する場合は追記 $submenu['edit.php'][16][0] = '新着情報タグ'; //タグを変更する場合は追記 } function change_my_post_object_label() { global $wp_post_types; $labels = &$wp_post_types['post']->labels; $labels->name = '新着情報'; $labels->singular_name = '新着情報'; $labels->add_new = '新規追加'; $labels->add_new_item = '新着情報の新規追加'; $labels->edit_item = '新着情報の編集'; $labels->new_item = '新規新着情報'; $labels->view_item = '新着情報を表示'; $labels->search_items = '新着情報を検索'; $labels->not_found = '新着情報が見つかりませんでした'; $labels->not_found_in_trash = 'ゴミ箱に新着情報は見つかりませんでした'; } //カテゴリを変更する場合はこちらも追記 function change_my_category_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['category']->labels; $labels->name = '新着情報カテゴリー'; $labels->add_new_item = '新着情報カテゴリーを追加'; $labels->edit_item = '新着情報カテゴリーの編集'; $labels->all_items = '新着情報カテゴリー一覧'; $labels->search_items = '新着情報カテゴリーを検索'; $labels->not_found = '新着情報カテゴリーが見つかりませんでした'; } //タグを変更する場合はこちらも追記 function change_my_tags_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['post_tag']->labels; $labels->name = '新着情報タグ'; $labels->add_new_item = '新着情報タグを追加'; $labels->edit_item = '新着情報タグの編集'; $labels->all_items = '新着情報タグ一覧'; $labels->search_items = '新着情報タグを検索'; $labels->not_found = '新着情報タグが見つかりませんでした'; } add_action('init', 'change_my_post_object_label'); add_action('init', 'change_my_category_object_label'); add_action('init', 'change_my_tags_object_label'); add_action('admin_menu', 'change_my_post_menu_label');

ホームページに訪れた方のサイト内の滞留時間を高めるために、関連のある記事へのリンクを設置するのは有効な手法。ワードプレスの投稿機能を使用時に閲覧している記事の下部に前後の記事へのページネーションを実装する方法をメモ。 single.php // 前の記事を取得 $previous_post = get_previous_post(); // 次の記事を取得 $next_post = get_next_post(); if($previous_post){ echo('<a href="'.get_permalink($previous_post).'">前の記事: '.get_the_title($previous_post).'</a>'); } if($next_post){ echo('<a href="'. get_permalink($next_post).'">次の記事: '.get_the_title($next_post).'</a>'); } 同一カテゴリーに限定する場合は「get_previous_post」「get_next_post」の引数に「true」を指定します。 WordPressでの前後の記事へのページネーション実装方法

ワードプレスのリビジョン機能は過去の投稿を履歴として残しておく機能です。誤ってブラウザを閉じてしまったり、違えた内容で保存してしまった際に、過去の投稿内容に復旧できるため、とても便利なのですが、そのままにしておくと延々と履歴が溜まり、サイト自体の表示が遅くなることもあるため、制御方法をメモ。 wp-config.php（PHP） define('WP_POST_REVISIONS', 5); 末尾の数値を残しておきたい履歴数を設定。サーバーによっては「wp-config.php」ファイルの書き込みが禁止されているものもあるため、その場合は各種FTPソフト等でパーミッションを「600」に変更して書き込みを許可したのち、元に戻します。 尚、設定前に作成されたリビジョンは上記のコードでは消えないため、別途データベースを編集するか、プラグインで対応する必要があります。

WordPress（ワードプレス）の投稿編集からタグを指定する際に、初期状態（デフォルト設定）だとテキスト入力形式となっていて間違いやすいため、カテゴリーと同様にチェックボックスでの選択形式に変更した際の実装方法をメモ。 function.php（PHP） function change_post_tag_to_checkbox(){ $args = get_taxonomy('post_tag'); $args -> hierarchical = true; //Gutenberg対応 $args -> meta_box_cb = 'post_categories_meta_box'; //Classicエディタ対応 register_taxonomy('post_tag', 'post', $args); } add_action('init', 'change_post_tag_to_checkbox', 1); 上記を「function.php」に追記。「グーテンベルク」と「クラシックエディタ」とで記載方法が異なるようなので注意

WordPress（ワードプレス）でページごとにタイトル（title）やディスクリプション（description）タグを変更する場合、「all in one seo」等のプラグインを使用されることが多いのだけれど、プラグインの多用はサイト遅延の原因にもなるので、phpを使用して直接記載する方法をメモ。 function.php（PHP） //タイトルタグの設定 function custom_document_title($title) { if(is_home() || is_front_page()) { $title = get_bloginfo('name'); }elseif(is_single()) { $title = get_the_title().'｜'.get_bloginfo('name'); }elseif(is_page()) { $title = get_the_title().'｜'.get_bloginfo('name'); }elseif(is_category()) { $title = single_cat_title('', false).'｜'.get_bloginfo('name'); }elseif(is_tag()) { $title = single_tag_title('', false).'｜'.get_bloginfo('name'); }else if(is_archive()){ $title = '投稿一覧｜'.get_bloginfo('name'); }else{ $title = get_bloginfo('name'); } return $title; } add_filter('pre_get_document_title', 'custom_document_title'); //ディスクリプションタグの設定 function custom_meta_description() { global $post; $description = ''; if(is_home() || is_front_page()) { $description = 'カスタムホームページディスクリプションを記載'; }elseif(is_single() || is_page()) { // 抜粋がある場合 if(has_excerpt($post->ID)) { $description = strip_tags(get_the_excerpt($post->ID)); }else{ $description = 'カスタムホームページディスクリプションを記載'; } }elseif(is_category()) { $description = 'カテゴリー: '.single_cat_title('', false).'に関する記事一覧ページです。'; }elseif(is_tag()) { $description = 'タグ: '.single_tag_title('', false).'に関連する記事一覧ページです。'; }elseif(is_archive()) { $description = '投稿記事一覧ページです。'; }else{ $description = 'カスタムホームページディスクリプションを記載'; } // ディスクリプションタグを出力 echo('<meta name="description" content="'.esc_attr($description) .'">').""; } add_action('wp_head', 'custom_meta_description'); 「header.php」内に既に「title」タグが記載されている場合は、「title」タグの削除が必要です。

WordPress（ワードプレス）で画像追加してページに掲載する際に、アップロードは正常なのに小さいサイズ（scaled）の画像に置換されて表示されることがあります。これは対象画像のサイズが大きいため、読み込みが遅くならないように自動処理されているようですが、ギャラリー等で品質が保てなくなるので対処方法をメモ。 function.php（PHP） add_filter('big_image_size_threshold', '__return_false'); 上記を追記することで自動生成・置換を防ぐとこができます。その他のサイズに関しては「メディア設定」の項目で変更可能ですが、同様にfunction.phpでも制御できます。 function.php（PHP） //既存のサイズを停止 function disable_image_autogeneration($sizes) { unset($sizes['thumbnail']); // thumbnailサイズを停止 unset($sizes['medium']); // mediumサイズを停止 unset($sizes['large']); // largeサイズを停止 unset($sizes['medium_large']); // medium_large'サイズを停止 unset($sizes['1536x1536']); // 1536pxサイズを停止 unset($sizes['2048x2048']); // 2048pxサイズを停止 return $sizes; } add_filter('intermediate_image_sizes_advanced', 'disable_image_autogeneration'); 更に、コンテンツに適したサイズに自動変換したい場合は任意のサイズを追加指定することも可能です。 function.php（PHP） add_image_size('contents01（ファイルの末尾に付与）', 横幅（px）, 縦幅(px), true); //最後の引数は切り欠きの有無 尚、アップロードされた画像は年月ベースのフォルダに整理されて保存されますが、こちらもメディア設定で「チェックボックス」を外しておいた方が固定ページなどでHTMLを直書きする際は便利です。 [WordPress]メディアの自動生成を停止する方法 アイキャッチ画像（Featured Image）およびサムネイル画像のサイズを追加する

WordPress（ワードプレス）でメディアを追加する際に、動画や大きめの画像を追加しようとすると初期状態ではファイルサイズが不十分な時があります。変更手順は契約サーバーにより異なりますが、今回はお名前サーバーのSDプランを対応した際の方法をメモ。 php.ini upload_max_filesize = 20M post_max_size = 20M memory_limit = 20M SDプランでは「php.ini」ファイルを作成しての変更を推奨していましたので、上記ファイルを作成して対象サイトのディレクトリ直下にアップロード。WordPress（ワードプレス）のメディアページに数値が適応されていれば完了です。 値に関しては自由に設定は可能ですが、概ねサーバーの許容範囲になるようです。 WordPressサイトのファイルアップロードサイズ上限を引き上げる方法

WordPress（ワードプレス）でホームページ制作をする際に、トップページは複雑な構成になることが多いため、専用ファイル（home.php）で作成することが多いのですが、編集を自由にしたいとのご要望から個別ページで作成する場合もあります。その際に投稿一覧（新着情報）を自由な位置に配置できるように投稿一覧をショートコード化した方法をメモ。 function.php（PHP） function news_post_list() { $html = '<ul class="newslist__list">'; $postargs = array( 'post_type' => 'post', 'posts_per_page' => 5, //表示件数指定 ); $newspost_query = new WP_Query($postargs); if ($newspost_query->have_posts()) : while($newspost_query->have_posts()) : $newspost_query->the_post(); $html .= '<li><a href="'.get_permalink().'">'; $html .= '<span class="news__list__date">'.get_the_time('Y/m/j').'</span>'; //カテゴリーを取得 $categories = get_the_category(); if($categories){ foreach($categories as $category){ $html .= '<span class="newslist__list__cat">'.$category->name.'</span>'; } } $html .= '<span class="news__list__heading">'.get_the_title().'</span>'; $html .= '</a></li>'; endwhile; endif; wp_reset_postdata(); $html.='</ul>'; return $html; } add_shortcode('my_news_post_list', 'news_post_list'); [my_news_post_list]を個別ページのショートコードブロックの中に記載して完了。一応、デフォルトでショートコードが用意されているようなのですが、反映に1時間近くかかるようなので、そちらは実用性がないかもしれません。 「投稿の表示」ショートコード 日本語サポート

WordPress（ワードプレス）でサイトを運用していく際に、投稿ページ（カスタム投稿）や個別ページに独自の入力項目（カスタムフィールド）を追加することがあります。編集ページに移動すると内容を確認できますが、内容によっては一覧ページの段階で確認できる方が便利なので対応方法をメモ。 function.php（PHP） function my_adv_posts_columns($columns) { $columns['my_adv_post'] = 'オリジナルカラムの名称'; return $columns; } function add_column($column_name, $post_id){ if($column_name == 'my_adv_post'){ $get_value = get_post_meta($post_id, 'my_adv_post_state', true); if(isset($get_value) && $get_value == 1 ) { echo('表示する'); }else{ echo('表示しない'); } } } //投稿ページに適応 add_filter('manage_posts_columns', 'my_adv_posts_columns'); add_action('manage_posts_custom_column', 'add_column', 10, 2); //個別ページに適応 add_filter('manage_pages_columns', 'my_adv_posts_columns'); add_action('manage_pages_custom_column', 'add_column', 10, 2); //カスタム投稿タイプに適応（○○○○はカスタム投稿の投稿タイプ名） add_filter('manage_○○○○_posts_columns', 'my_adv_posts_columns'); add_action('manage_○○○○_posts_custom_column', 'add_column', 10, 2); 参考例は投稿ページと個別ページ、カスタム投稿のそれぞれのページに広告表示の可否をカスタムフィールド「my_adv_post_state」を作成して、入力された値に応じて表示したもの。 ダッシュボードのカスタム投稿タイプの一覧に、記事属性のカラム（列）を追加する方法 WordPress 管理画面の投稿をカスタマイズ

WordPress（ワードプレス）を使用して特定条件の記事のみ表示する際に、「tax_query」（カスタムタクソノミー）と「meta_query」（カスタムフィールド）を使用する場合が多いのだけれど、併用すると仕様上「両方の条件を満たす記事（AND）」にしかならないようので、「いずれかの条件を満たす記事（OR）」になるよう実装した方法をメモ。 PHP <ul> <?php //tax_queryでの処理 $args1 = array( 'post_type' => 'your_custom_post_type', 'tax_query' => array( 'relation' => 'OR', array( 'taxonomy' => 'your_taxonomy_1', 'field' => 'slug', 'terms' => 'your_term_1', ), array( 'taxonomy' => 'your_taxonomy_2', 'field' => 'slug', 'terms' => 'your_term_2', ), ), ); //meta_queryでの処理 $args2 = array( 'post_type' => 'your_custom_post_type', 'meta_query' => array( 'relation' => 'OR', array( 'key' => 'your_custom_field_1', 'value' => 'your_value_1', 'compare' => '=', ), array( 'key' => 'your_custom_field_2', 'value' => 'your_value_2', 'compare' => '=', ), ), ); $query1 = new WP_Query($args1); $query2 = new WP_Query($args2); //投稿まとめ用配列の生成 $postslist = array(); if($query1->have_posts()) { while($query1->have_posts()) { $query1->the_post(); $postlist[] = array( 'post_date' => strtotime(get_the_time()), 'post_title' => get_the_title(), 'post_link' => get_the_permalink() ); } } if($query2->have_posts()) { while($query2->have_posts()) { $query2->the_post(); $postlist[] = array( 'post_date' => strtotime(get_the_time()), 'post_title' => get_the_title(), 'post_link' => get_the_permalink() ); } } wp_reset_postdata(); // 重複を除外してユニークな投稿配列を取得する $postlist = array_unique($postlist, SORT_REGULAR ); // 投稿配列を投稿日時でソートする $sortArray = array_column($postlist, 'post_date'); array_multisort($sortArray, SORT_DESC, $postlist); //出力 foreach($postlist as $val){ echo('<li> <span class="home__newslist__item__date">'.date('Y年m月j日', $val['post_date']).'</span> <span class="home__newslist__item__hedding"><a href="'.$val['post_link'].'">'.$val['post_title'].'</a></span> </li>'); } ?> </ul> それぞれの条件で投稿リストを取得してから、「$postlist」にまとめ、そこから重複する投稿を削除、更に投稿日時で並び替えするという流れになります。 ランダムで取得する時も同様ですが、ページ送りで2ページ目以降に遷移することを考える場合は取得した配列データ（$postlist）をセッションで保存しておいて、適切な範囲を呼び出すことになります。並び替えの都合上、全ての投稿を取得する必要があり、投稿数が多いと処理が遅くなるのであまり実用的ではないかもしれません。

ワードプレスの投稿機能を利用して、様々な投稿をされる中で、デザインをしっかりとしたものにしたいので「雛形となるブロック」をご希望された際に調べた内容をメモ。 function.php add_action('enqueue_block_editor_assets', 'add_custom_block_style_script'); function add_custom_block_style_script() { //Javascript読み込み $directory_url = get_template_directory_uri(); $wp_js = array('wp-edit-post', 'wp-element', 'wp-blocks', 'wp-editor', 'wp-block-editor', ); wp_enqueue_script('add-post-editor-block-script', $directory_url . '/original-blocks.js', $wp_js, '', true ); //CSS読み込み wp_enqueue_style('dg-style-editor-style', $directory_url . '/original-blocks.css' ); } オリジナルブロック用のjavascriptファイルとcssファイルを用意し、それぞれをテーマに読みこませます。尚、上記のcssファイルは投稿ページ上のデザインに使用するものになるため、ユーザーページでは通常の読み込みのものを使用します。 original-blocks.js (function (blocks, editor, element, blockEditor){ var RichText = editor.RichText; var { InnerBlocks } = blockEditor; blocks.registerBlockType( 'original/new-block', { title: 'オリジナルブロック', icon: 'wordpress-alt', category: 'common', attributes: { //値の保存に必須 dt: { type: 'string', source: 'html', selector: 'dt', }, dd: { type: 'string', source: 'html', selector: 'dd', } }, edit: function( props ) { return element.createElement('div', { className: 'my-block' }, [ element.createElement( 'div', { className: 'block-content' }, [ element.createElement( InnerBlocks, { templateLock: [ ['core/image'] ] } ), ] ), element.createElement( 'dl', { className: 'block-content-inner' }, [ element.createElement( RichText, { tagName: 'dt', value: props.attributes.dt, onChange: function( newContent ) { props.setAttributes( { dt: newContent } ); }, placeholder: '見出しを記載', } ), element.createElement( RichText, { tagName: 'dd', value: props.attributes.dd, onChange: function( newContent ) { props.setAttributes( { dd: newContent } ); }, placeholder: 'コンテンツを記載', } ), ] ) ] ); }, save: function( props ) { return element.createElement('div', { className: 'my-block' }, [ element.createElement( 'div', { className: 'block-content' }, [ element.createElement( InnerBlocks.Content, {} ), ] ), element.createElement( 'dl', { className: 'block-content-inner' }, [ element.createElement( RichText.Content,{ tagName: 'dt', value: props.attributes.dt, } ), element.createElement( RichText.Content,{ tagName: 'dd', value: props.attributes.dd, } ), ] ), ] ); }, }); }( window.wp.blocks, window.wp.editor, window.wp.element, window.wp.blockEditor ) ); サンプルはサムネイル画像と画像に対する見出しとコメントが一体となったブロック。「edit」の部分が編集画面の処理、「save」の部分が保存処理。上部の「attributes」を設定し忘れると打ち込んだ文字の保存ができないので要注意 attributesの部分で、文字の挿入に必要となる変数を作成し、それぞれの保存形式を指定しています。例は「dt」と「dd」の二種類の変数を作成、それぞれを「string」型で保存し、「selector」でマーキング要素（html）を指定しています。 「edit」の「element.createElement」関数で作成したい「HTML」を入れ込状に作成。テキスト部分は「RichText」、画像部分は「InnerBlocks」を使用し、見出しとコンテンツ部分は動的に変化するよう「onChange」を使用して専用の関数を作成しています。 「save」処理は「edit」処理とほぼ同様の内容になりますが、第一引数の「RichText」を「RichText.Content」に、「InnerBlocks」を「InnerBlocks.Content」に変更します。 上記サンプルは各要素が一つづつなので単純ですが、要素が複数になる場合、例えば画像が二点、dtとddの組み合わせが二点になる場合は下記 javascript (function (blocks, editor, element, blockEditor){ var RichText = editor.RichText; var { InnerBlocks } = blockEditor; blocks.registerBlockType( 'original/new-block', { title: 'オリジナルブロック', icon: 'wordpress-alt', category: 'common', attributes: { //値の保存に必須 dt01: { type: 'string', source: 'html', selector: 'dt:nth-of-type(1)', }, dd01: { type: 'string', source: 'html', selector: 'dd:nth-of-type(1)', }, dt02: { type: 'string', source: 'html', selector: 'dt:nth-of-type(2)', }, dd02: { type: 'string', source: 'html', selector: 'dd:nth-of-type(2)', } }, edit: function( props ) { return element.createElement('div', { className: 'my-block' }, [ element.createElement( 'div', { className: 'block-content' }, [ element.createElement( InnerBlocks, { templateLock: [ ['core/image'], ['core/image'] ] } ), ] ), element.createElement( 'dl', { className: 'block-content-inner' }, [ element.createElement( RichText, { tagName: 'dt', value: props.attributes.dt01, onChange: function( newContent ) { props.setAttributes( { dt01: newContent } ); }, placeholder: '見出しを記載', } ), element.createElement( RichText, { tagName: 'dd', value: props.attributes.dd01, onChange: function( newContent ) { props.setAttributes( { dd01: newContent } ); }, placeholder: 'コンテンツを記載', } ), element.createElement( RichText, { tagName: 'dt', value: props.attributes.dt02, onChange: function( newContent ) { props.setAttributes( { dt02: newContent } ); }, placeholder: '見出しを記載', } ), element.createElement( RichText, { tagName: 'dd', value: props.attributes.dd02, onChange: function( newContent ) { props.setAttributes( { dd02: newContent } ); }, placeholder: 'コンテンツを記載', } ), ] ) ] ); }, save: function( props ) { return element.createElement('div', { className: 'my-block' }, [ element.createElement( 'div', { className: 'block-content' }, [ element.createElement( InnerBlocks.Content, {} ), ] ), element.createElement( 'dl', { className: 'block-content-inner' }, [ element.createElement( RichText.Content,{ tagName: 'dt', value: props.attributes.dt01, } ), element.createElement( RichText.Content,{ tagName: 'dd', value: props.attributes.dd01, } ), element.createElement( RichText.Content,{ tagName: 'dt', value: props.attributes.dt02, } ), element.createElement( RichText.Content,{ tagName: 'dd', value: props.attributes.dd02, } ), ] ), ] ); }, }); }( window.wp.blocks, window.wp.editor, window.wp.element, window.wp.blockEditor ) ); 「attributes」の変数を追加（変更）し「selector」の指定方法を変更、各変数を入力値の所に再指定、画像ブロックはInnerBlocksのテンプレート内に新たなブロック要素（['core/image']）を追加しています。saveの箇所も合わせて変更します。 Gutenbergでオリジナルブロックを作成する超基本の方法を解説【WordPress】 Gutenbergにオリジナルなブロックを作成する方法（動的編） Gutenbergでオリジナルブロックを作ってみよう！（ES5) 【WordPress5.8】Gutenbergコアのブロック名、キーワード、スタイル一覧 【基礎知識まとめ】WordPressでブロックを自作する方法

ワードプレスの投稿のカテゴリー機能を、目的ごとに使い分けたいというご要望があった際に、カテゴリーごとに所属するカテゴリー（子カテゴリー）を表示する必要があったので対応方法をメモ。 PHP $terms = get_terms('category', array('slug' =>'news')); $term = $terms[0]; $cats = get_categories(array( 'child_of' => $term->term_id, 'title_li' => '', )); foreach($cats as $cat){ echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li>'; } 「get_terms」に対象となるカテゴリーのタクソノミー名（category）とスラグ（news）を挿入してタームIDを取得。「get_categories」に上記タームIDを挿入して対象となるカテゴリーの子カテゴリーのみを取得しています。 また、全親カテゴリーごとに子カテゴリーを連動して呼び出す場合は以下 PHP $terms = get_terms('category', array('parent' => 0)); foreach($terms as $term){ echo '<li><a href="'.get_category_link($term->term_id).'">'.$term->name.'</a></li>'; $children = get_terms('category', array('parent' => $term->term_id)); foreach($children as $child){ echo '<li><a href="'.get_category_link($child->term_id).'">'.$child->name.'</a></li>'; } } 親カテゴリーのみを取得する処理の中に子カテゴリーの取得処理を追加しています。 WordPress タクソノミーのターム情報を取得して表示する ID/名称/スラッグ特定の親カテゴリーの子カテゴリーをリンク有り無しそれぞれでリスト表示する方法

ワードプレス用プラグイン「Jetpack」を使用することでメタタグを自動挿入することが可能になりますが、一部のページでタイトルやディスクリプションを自由に変更したいとの要望があったので対応方法をメモ。 function.php（PHP） function change_jetpack_tags($tags) { if(is_page()){ if(!empty(get_field('page_title'))){ //オリジナルタイトル $tags['og:title'] = get_field('page_title'); } if(!empty(get_field('page_description'))){ //オリジナルディスクリプション $tags['og:description'] = get_field('page_description'); } } return $tags; } add_filter('jetpack_open_graph_tags', 'change_jetpack_tags'); 上記のコードを、使用しているテーマの「function.php」に追記。「add_filter」を使用して「Jetpack」内で使われている「jetpack_open_graph_tags」という関数にフックすることで、呼び出し時に追加で作成した関数が機能するように設定。 参考例は個別ページのみということで「is_page()」の場合にのみ適応しているほか、プラグイン「Advanced Custom Fields」に入力した値を参照しているためコードが長くなっています。基本は「$tags['og:title']」、「$tags['og:description']」に直接の値を挿入することで実装が可能。 また、タイトルやディスクリプションに限らずHTMLに出力される変数は全て「jetpack_open_graph_tags」を通るので、こちらに紐づけることで全ての値の編集が可能。値は「$tags」に配列として挿入されているので、print_r($tags)等で書き出すことで確認ができます。 Open Graph ―Jetpack[WP]Jetpack のOGP（og:image）のデフォルト画像を変更する方法

ワードプレスで自社コンテンツを運用されている際など、各記事の下に関連記事などを設置し、滞在時間を延ばす施策をした際に行った方法をメモ。 PHP <?php $post__not_in = (array)$id; $term_vars = get_the_terms( $post->ID, '○○○○-cat' ); $vars = array(); foreach($term_vars as $teram_var){ array_push($vars, $teram_var->slug); } $args = array( 'post_type' => '○○○○', 'post__not_in' => $post__not_in, //表示中の記事を除外 'posts_per_page' => 3, //表示件数 'tax_query' => array( 'relation' => 'OR', array( 'taxonomy' => '○○○○-cat', 'field' => 'slug', 'terms' => $vars, 'operator'=>'IN' ), ), ); $new_query = new WP_Query($args); if ( $new_query ->have_posts() ) : while($new_query ->have_posts()) : $new_query ->the_post(); ?> <li> <a href="<?php the_permalink() ?>"> <?php if(has_post_thumbnail()) { echo('<div>'.the_post_thumbnail().'</div>'); } ?> <span><?php the_time('Y.m.j') ?></span> <span><?php the_title(); ?></span> </a> </li> <?php endwhile; endif; wp_reset_postdata(); ?> 上記の参考コードは対象記事の所属するカテゴリーと同一のカテゴリーを表示させています。カテゴリーが複数に所属する場合もあるため、カテゴリーは配列に格納した後に「tax_query」に挿入。自身のページを表示しないよう「post__not_in」を使用して除外しています。

投稿カテゴリーに独自カスタムフィールドを追加して並び順番等を操作する場合、カスタムフィールドを直接キーに設定してデータを呼び出すことができなかったので、対応方法をメモ PHP $categories = get_categories(); foreach ($categories as $category) { $categoryary[] = array( 'term_id' => $category->term_id, 'name' => $category->name, 'slug' => $category->slug, 'category-order' => get_term_meta($category->term_id, 'category-order', true), 'category-state' => get_term_meta($category->term_id, 'category-state', true), ); } $orders = array_column($categoryary, 'category-order'); array_multisort($orders, SORT_ASC, $categoryary); foreach ($categoryary as $cat) { if(empty($cat['category-state'])){ echo('<h2>'.$cat['name'].'</h2> <p><a href="'.get_category_link($cat['term_id']).'">もっと見る</a></p>'); } } 独自に追加したカスタムフィールドは「category-order（並び順）」と「category-state（表示・非表示）」カテゴリーを呼び出す際に必要事項と上記2点を連想配列「$categoryary」にして取得。「array_multisort」を使用して並び変えたあとにループ処理で取得情報を表示 投稿カテゴリーへのカスタムフィールドの追加方法は下記ページで紹介しています WordPress（ワードプレス）でカテゴリー（タクソノミー）登録・編集画面にカスタムフィールドを追加する。

レンタルサーバーなどではワードプレスの自動インストール機能を設置されているところも多くありますが、旧式のバージョンを取り扱っているところは少ない。改修作業のためのテスト環境の構築や、運用中サーバーのPHPのバージョンにより旧バージョンのワードプレスをインストールする必要があることもあるので方法をメモ。 ワードプレスのインストール方法 サイトからワードプレスのファイルをダウンロードする 公式サイトにワードプレスのデータの一式が圧縮ファイルで保存されています。こちらからインストールしたいワードプレスのバージョンを選択してダウンロードします。 リリース WordPress.org 日本語 各バージョンの動作環境および推奨環境 WordPressPHPMySQL / MariaDB6.0系7.4以上5.7以上 / 10.3以上5.9系7.4以上5.7以上 / 10.2以上5.6 – 5.8系7.4以上5.6以上 / 10.2以上5.5系7.4以上5.6以上 / 10.2以上5.3 – 5.4系7.3以上5.6以上 / 10.2以上5.2系7.3以上5.6以上 / 10.1以上5.0 – 5.1系7.3以上5.6以上 / 10.1以上4.9.5 – 4.9.x7.2以上5.6以上 / 10.0以上4.9.0 – 4.9.47以上5.6以上 / 10.0以上4.7 – 4.8系7以上5.6以上 / 10.0以上4.4 – 4.6系5.6以上5.6以上 / 10.0以上4.1 – 4.3系5.6以上5.0.15以上4.0系5.5以上5.0.15以上3.2 – 3.9系5.2.4以上5.0.15以上3.0 – 3.1系4.3以上4.1.2以上 データベースを用意する ワードプレスをインストールしたいサーバーでデータベースを用意します。サーバーのコントロールよりデータベースの作成を選択し、手順に従ってデータベースを作成します。この時入力した以下の情報はワードプレスのインストール時に使用するので記録しておきます。 データベース名ユーザー名パスワードホスト名 ファイルを展開してサーバーにアップロード ダウンロードしたワードプレスデータを展開（解凍）し、ワードプレスをインストールしたいディレクト（サーバー）にアップロードします。 専用画面から情報を入力して完了 ワードプレスのファイルをアップロードしたURLにアクセスするとデータベース設定用の専用の画面が表示されます。ガイドに従って先ほど作成したデータベースの情報（データベース名、ユーザー名、パスワード、ホスト名）を入力し「送信」ボタンを押して完了です。 WordPress 各バージョンの動作環境および推奨環境

ワードプレスでカテゴリーに登録されている記事のタグ一覧を表示する機会があったので方法をメモ。 PHP $cat = get_queried_object(); $cat_id = $cat -> term_id; $post_ids = get_objects_in_term($cat_id, 'カテゴリータクソノミー名'); $post_tags = wp_get_object_terms($post_ids, 'タグタクソノミー名'); if($post_tags){ echo('<ul>'); foreach( $post_tags as $value ){ echo('<li><a href="'.get_tag_link($value->term_id).'">'.$value->name.'</a></li>'); } } 上記はカテゴリー一覧で使用する場合。その他の箇所で特定カテゴリーのタグを表示する場合は上段2行は不要。「get_objects_in_term」の「$cat_id」の箇所に該当カテゴリーのIDを記載。 【WordPress】指定したカテゴリー内で利用しているタグ一覧を取得して表示する例

各投稿記事への項目ではなく、カテゴリーに項目を追加してカテゴリーの色分けを希望された際に実装した内容をメモ。 function.php 今回新たに入力項目を設置する箇所はカスタム投稿タイプに追加した「sample-cat」。フックは{$taxonomy}_add_form_fields、{$taxonomy}_edit_form_fields、create_{$taxonomy}、edit_{$taxonomy}を使用。 ※{$taxonomy}はタクソノミー名（今回はsample-cat） //新規登録画面への項目追加 function category_form_fields_function($taxonomy){ echo('<div class="form-field"> <label for="bg_color">ラベル背景色</label> <input type="color" name="bg_color" id="bg_color" value=""> </div>'); }; add_action('sample-cat_add_form_fields', 'category_form_fields_function'); //編集画面への項目追加 function category_editform_fields_function($tag, $taxonomy){ $term_meta = get_term_meta($tag->term_id, 'bg_color', true)); echo('<tr class="form-field"> <th scope="row" valign="top"><label for="bg_color">ラベル背景色</label></th> <td> <input type="color" name="bg_color" id="bg_color" value="'.esc_attr($term_meta).'"> </td> </tr>'); } add_action('sample-cat_edit_form_fields', 'category_editform_fields_function'); //入力内容の登録処理 function update_category_form_termmeta($term_id){ $key = 'bg_color'; if(isset($_POST[$key]) && esc_attr($_POST[$key])){ update_term_meta($term_id, $key, $_POST[$key]); }else{ delete_term_meta($term_id, $key); } } add_action('create_sample-cat', 'update_category_form_termmeta'); add_action('edit_sample-cat', 'update_category_form_termmeta'); データ取得（PHP） $term = get_queried_object(); if($term){ $meta = get_term_meta($term->term_id, 'bg_color', true); } 尚、上記はwordpress4.4以上の場合、それ以前だと「update_term_meta」「delete_term_meta」が使えないので下記の方法で対応。 function.php //新規登録画面への項目追加 function category_form_fields_function($taxonomy){ echo('<div class="form-field"> <label for="bg_color">ラベル背景色</label> <input type="color" name="bg_color" id="bg_color" value=""> </div>'); }; add_action('sample-cat_add_form_fields','category_form_fields_function'); //編集画面への項目追加 function category_editform_fields_function($term){ $t_id = $term->term_id; $term_meta = get_option("sample-cat_bg_color_$t_id"); echo('<tr class="form-field"> <th scope="row" valign="top"><label for="term_meta[bg_color]">ラベル背景色</label></th> <td> <label for="term_meta[bg_color]"></label><input type="color" name="term_meta[bg_color]" id="term_meta[bg_color]" value="'.esc_attr($term_meta['bg_color']).'"> <p>初期値に戻す場合は #1f2879 を入力</p> </td> </tr>'); } add_action('sample-cat_edit_form_fields','category_editform_fields_function'); //入力内容の登録処理 function update_category_form_termmeta($term_id){ if(isset($_POST['term_meta'])){ $t_id = $term_id; $term_meta = get_option('sample-cat_bg_color_$t_id'); $cat_keys = array_keys($_POST['term_meta']); foreach($cat_keys as $key){ if(isset($_POST['term_meta'][$key])){ $term_meta[$key] = $_POST['term_meta'][$key]; } } update_option('sample-cat_bg_color_$t_id', $term_meta); } } add_action('create_sample-cat', 'update_category_form_termmeta'); add_action('edit_sample-cat', 'update_category_form_termmeta'); データ取得（PHP） $term = get_queried_object(); if($term) { $t_id = $term->term_id; $term_meta = get_option('sample-cat_bg_color_$t_id'); } 【WordPress】カテゴリー(タクソノミー)編集画面に独自の設定項目を追加する方法Wordpressでカスタム分類法にカスタムフィールドを追加する方法

ワードプレスを使用して運用されているサイトで投稿した記事を検索したい（サイト内検索）というご相談を受けた際に調べた内容をメモ。 サイト内検索の実装手順 検索フォームを準備する まずは、検索フォームを準備します。ソースを該当ページに直書きするでも良いですが、使いまわせるように別ファイル（searchform.php）で作成。テーマ内にファイルをアップしたら、読み込み専用のソースで読み込みます。 PHP <?php get_template_part('searchform'); ?> searchform.php 今回はカスタム投稿から投稿された記事に対して、タグ、カテゴリー（カスタムタクソノミー）を使用して検索する方法を実装。 <form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <input type="hidden" name="s" id="s"> <input type="hidden" name="post_type" value="<?php echo get_post_type( $post ); ?>"> <select name='s-tag'> <option value="">全てのタグ</option> <?php if($terms = get_terms('contents-tag')) { foreach ( $terms as $term ) { echo('<option value="'.esc_html( $term->slug ).'">'.esc_html($term->name).'</option>'); } } ?> </select> <select name="s-cat"> <option value="">全てのカテゴリー</option> <?php if($terms = get_terms('contents-cat')) { foreach ( $terms as $term ) { echo('<option value="'.esc_html( $term->slug ).'">'.esc_html($term->name).'</option>'); } } ?> </select> <input type="submit" value="検索"> </form> ワードプレスの検索機能は「s」のパラメータ（キーワード検索）を基準に行われる、キーワードの指定が不要な場合でも「hidden」要素で「s」の値を返す必要があります。また、一般的にサイト内検索では全てのページが対象となってしまうので、「name="post_type"」の部分で該当する投稿タイプを限定しています。 検索結果ページの準備 ワードプレスで検索を行った際に表示されるページは「search.php」が使用されます。そのままで良い場合は別として、検索結果ごとに表示するページを変更した場合は以下のコードを追加する必要があります。 検索結果ページを投稿タイプ別に切り分ける場合の対応 function.php function custom_template_include($template){ if(is_search()){ $post_types = get_query_var('post_type'); $new_template = locate_template(array('search-'.$post_types.'.php')); if($new_template != ''){ return $new_template; } } return $template; } add_filter('template_include', 'custom_template_include', 99); 上記コードを「function.php」に追記することで、他のページ同様に「search-○○○○（カスタム投稿名）.php」が使用可能にできます。 search.php（search-○○○○（カスタム投稿名）.php） <?php // searchform.phpから送られてきたパラメーターを取得 $post_type = wp_unslash($_GET['post_type']); $s-tag = wp_unslash($_GET['s-tag']); $s-cat = wp_unslash($_GET['s-cat']); // 絞り込み条件を追加 if($s-tag) { $taxquery_tag = array( 'taxonomy' => 'contents-tag', 'terms' => $s-tag, 'field' => 'slug', ); } if($s-cat) { $taxquery_cat = array( 'taxonomy' => 'contents-cat', 'terms' => $s-cat, 'field' => 'slug', ); } $args = array( 'post_type' => $post_type, 'paged' => get_query_var('paged'), 's' => get_search_query(), 'tax_query' => array( 'relation' => 'AND', $taxquery_tag, $taxquery_cat, ), ); $sub_query = new WP_Query($args); ?> <ul class="newslist__list"> <?php if ( $sub_query->have_posts() ) : ?> <p><?php echo $sub_query->post_count; ?>件<span> / <?php echo $sub_query->found_posts; ?> 件</span></p> <?php while ( $sub_query->have_posts() ) : $sub_query->the_post(); ?> <!-- ここにループ処理 --> <li> <a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a> </li> <!-- ここまでループ処理 --> <?php endwhile; ?> </ul> <nav class="pagination"> <?php //ページネーション $bignum = 999999999; echo paginate_links( array( 'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ), 'format' => '', 'current' => max( 1, get_query_var('paged') ), 'total' => $sub_query->max_num_pages, 'prev_text' => '&larr;', 'next_text' => '&rarr;', 'type' => 'list', 'end_size' => 3, 'mid_size' => 3 ) ); ?> </nav> <?php else: ?> <p>検索されたキーワードにマッチする記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> 「WP_Query」を使用して、条件に合った投稿リストを取得できるように値を設定。リスト取得後は「wp_reset_postdata」使用して、変更していた取得条件をリセットしています。 検索箇所をタイトルのみに限定する 特に指定のない場合は、タイトル、本文、抜粋が検索キーワードの対象となります。正確性を増すため、本文のみに限定したい場合は下記を追記。 function.php function search_by_title_only($query) { if (!is_admin() && $query->is_main_query() && $query->is_search()) { $query->set('post_type', 'post'); // 投稿タイプを限定する場合に記載 $query->set('search_title_only', true); } } add_action('pre_get_posts', 'search_by_title_only'); function filter_search_by_title($where, $query) { global $wpdb; if ($query->get('search_title_only')) { $search = $query->get('s'); if ($search) { $where = " AND {$wpdb->posts}.post_title LIKE '%" . esc_sql($wpdb->esc_like($search)) . "%'"; } } return $where; } add_filter('posts_where', 'filter_search_by_title', 10, 2); 条件に応じてテンプレートファイルを変更する 『WordPress』でカスタム投稿毎にsearch.phpを切り替える WordPress サイト内検索機能の実装方法 【タクソノミー＆ターム編】WP_QueryのANDとORを併用した複雑な条件指定の書き方 [WordPress] カスタムフィールドで絞り込んで一覧表示する WordPressのカスタムタクソノミーで記事の絞り込み検索をする方法

カスタムフィールド機能の追加は、プラグインでも可能ですが、今回は投稿済の記事から選択して設定する必要があったので、function.phpに追記して実装した方法をメモ。 function.php //カスタム投稿（contents）追加 function create_post_type_contents() { register_post_type( //カスタム投稿 'contents', array( 'labels' => array('name' => __('用語説明'), 'singular_name' => __('用語説明'), 'menu_name' => __('用語説明'), 'edit_item' => __('用語説明を編集')), 'supports' => array('title', 'editor', 'thumbnail', 'revisions'), 'public' => true, 'has_archive' => true, 'rewrite' => array('slug' => 'contents'),//URL 'menu_position' => 6 ) ); } add_action('init', 'create_post_type_contents'); //カスタムフィールド追加 function hook_func_for_metabox(){ add_meta_box( 'metabox_div_id',//メタボックスのdivに指定されるID '関連用語', //タイトル 'html_for_metabox_1_func', //表示用のHTMLを出力するphp関数（下で定義） 'contents', //どのタイプの記事入力画面で表示するか 'normal' ); } //メタボックスの中身を実装する function html_for_metabox_1_func($post){ $keyname = "field_1"; //記事タイトルを配列に格納 $args=array( 'post_type' => 'contents', 'posts_per_page' => -1, 'post__not_in' => array($post->ID) //自身の記事を除外 ); $sub_query = new WP_Query($args); //登録済みの値を取得 $get_value = get_post_meta($post->ID, $keyname, true); if($sub_query->have_posts()){ while($sub_query->have_posts()){ $sub_query->the_post(); if(in_array(get_the_ID(), $get_value)){ echo('<label><input type="checkbox" name="'.$keyname.'[]" value="'.get_the_ID().'" checked="checked">'.get_the_title().'<label>'); }else{ echo('<label><input type="checkbox" name="'.$keyname.'[]" value="'.get_the_ID().'">'.get_the_title().'<label>'); } } } wp_reset_postdata(); //nonceを作成し、hiddenフィールドとして書き込む wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname); } add_action('admin_menu', 'hook_func_for_metabox'); //カスタムフィールドの入力欄の中のデータをデータベースへ保存する function hook_func_for_save_customfield( $post_id ){ $custom_fields = array('field_1'); foreach( $custom_fields as $d ) { if(isset($_POST['nonce-'.$d])){ if(wp_verify_nonce($_POST['nonce-'.$d], 'action-'.$d)){ if(current_user_can('edit_post', $post_id)){ ///// カスタムフィールドの値を更新 /// if(get_post_meta($post_id, $d) == ""){ //新しいデータならデータを作成 add_post_meta($post_id, $d, $_POST[$d], true); } elseif($_POST[$d] != get_post_meta($post_id, $d, true)){ //既存にあるデータで内容が異なるなら更新 update_post_meta($post_id, $d, $_POST[$d]); }elseif($_POST[$d] == ""){ //入力内容が空ならデータの削除 delete_post_meta($post_id, $d, get_post_meta($post_id, $d, true)); } } } } } return $post_id; } add_action('save_post', 'hook_func_for_save_customfield'); カスタムフィールドの入力チェック 入力チェックはjavascriptで行う。 function check_contents_field(){ global $post; if (is_admin() && $post->post_type == 'contents'){ echo <<<END <script language="javascript" type="text/javascript"> jQuery(document).ready(function(){ jQuery('#publish').click(function() { //バリデーションの実行 var error = []; if(jQuery("input[name='field_1']").val() ==''){ error[0]="値を入力してください"; } if(error.length > 0){ alert(error[0]); return false; } }); }); </script> END; } } add_action('admin_head-post-new.php', 'check_contents_field'); add_action('admin_head-post.php', 'check_contents_field'); single-contents.php（表示画面） <h3>関連用語</h3> <ul> <?php if(!empty($post->field_1)){ foreach($post->field_1 as $key => $value){ echo('<li><a href="'.get_the_permalink($value).'">'.get_the_title($value).'</a></li>'); } } ?> </ul> WordPressのカスタムフィールド追加（前編　メタボックス表示） WordPressにてfunction.phpを使いチェックボックスのカスタムフィールド付ける functions.phpでカスタムフィールドを追加する 【WordPress】プラグインなしでカスタム投稿タイプにカスタムフィールド（テキスト＆画像）を追加する方法

ワードプレスにアップロードされる画像は初期設定の大きさに自動でリサイズされたものが作成されますが、特定のページに適した大きさの画像にしたい場合もあります。そうった場合に希望の画像サイズを追加する際の方法をメモ。 function.php（PHP） add_image_size('画像サイズの名称', 横幅, 縦幅, 画像の処理); 画像の処理効果false初期値。指定した大きさに合うように、元の画像の縦横比を維持したまま切り欠きせずにリサイズtrue画像を指定した大きさに切り欠きしてリサイズ 「add_image_size」は画像を追加登録時に有効となるため、既に登録済の画像を新しいサイズで作成したい場合はプラグイン「Regenerate Thumbnails」を使用して一括リサイズを行う必要があります。

WordPress（ワードプレス）で専用の機能を実装する際にプラグインを利用することが多いなか、テーマの適応時に機能追加（データベースの作成）ができる方法があったのでメモ。 function.php（PHP） function theme_activate() { global $pagenow; if(is_admin() && $pagenow == "themes.php" && isset($_GET["activated"])) { do_action('theme_activate'); } } add_action('init', 'theme_activate'); function create_theme_tables() { global $wpdb; $table_name = $wpdb->prefix.'tbl_link'; //テーブルが存在していなければ作成する if ($wpdb->get_var("SHOW TABLES LIKE {$table_name}") != $table_name) { if(!empty($wpdb->charset)){ $charset_collate = "DEFAULT CHARACTER SET {$wpdb->charset} "; } if(!empty($wpdb->collate)){ $charset_collate .= "COLLATE {$wpdb->collate}"; } $sql = "CREATE TABLE {$table_name} ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `state` int(11) NOT NULL, `url` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) {$charset_collate} AUTO_INCREMENT=1;"; require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); dbDelta( $sql ); } } add_action('theme_activate', 'create_theme_tables'); テーマを有効化したときにアクションフックを呼び出すWordPress テーマ有効化時に独自テーブルを追加する方法

WordPress（ワードプレス）でのホームページ作成時に、ブロックの種類が多すぎると、かえって使いにくいので利用できるブロックを制限してほしいとの依頼を受けた際に参考にしたサイト、対応方法をメモ。 function.php（PHP） add_filter('allowed_block_types', 'custom_allowed_block_types', 10, 2); function custom_allowed_block_types($allowed_block_types, $post){ if($post->post_type === 'post'){ $allowed_block_types = array( 'core/paragraph', 'core/heading', 'core/image', ); } return $allowed_block_types; } 上記コードは「投稿画面（post）」で使えるブロックを「段階」「見出し」「画像」の3種類に制限しています。 他のブロックや、投稿タイプを指定する場合は下記を参考。 ブロックのタイプ $allowed_block_types = array( // 一般ブロック 'core/paragraph', // 段落 'core/heading', // 見出し 'core/image', // 画像 'core/quote', // 引用 'core/gallery', // ギャラリー 'core/list', // リスト 'core/audio', // 音声 'core/cover', // カバー 'core/file', // ファイル 'core/video', // 動画 // フォーマット 'core/code', // ソースコード 'core/freeform', // クラシック 'core/html', // カスタムHTML 'core/preformatted', // 整形済み 'core/pullquote', // プルクオート 'core/table', // テーブル 'core/verse', // 詩 // レイアウト要素 'core/button', // ボタン 'core/columns', // カラム 'core/media-text', // メディアと文章 'core/more', // 続きを読む 'core/nextpage', // 改ページ 'core/separator', // 区切り 'core/spacer', // スペーサー // ウィジェット 'core/shortcode', // ショートコード 'core/archives', // アーカイブ 'core/categories', // カテゴリー 'core/latest-comments', // 最新のコメント 'core/latest-posts', // 最新の記事 // 埋め込み 'core/embed', // 埋め込み 'core-embed/twitter', // Twitter 'core-embed/youtube', // YouTube 'core-embed/facebook', // Facebook 'core-embed/instagram', // Instagram 'core-embed/wordpress', // WordPress 'core-embed/soundcloud', // SoundCloud 'core-embed/spotify', // Spotify 'core-embed/flickr', // Flickr 'core-embed/vimeo', // Viemo 'core-embed/animoto', // Animoto 'core-embed/cloudup', // Cloudup 'core-embed/collegehumor', // CollegeHumor 'core-embed/dailymotion', // Dailymotion 'core-embed/funnyordie', // Funny or Die 'core-embed/hulu', // Hulu 'core-embed/imgur', // Imgur 'core-embed/issuu', // Issuu 'core-embed/kickstarter', // Kickstarter 'core-embed/meetup-com', // Meetup.com 'core-embed/mixcloud', // Mixcloud 'core-embed/photobucket', // Photobucket 'core-embed/polldaddy', // Polldaddy 'core-embed/reddit', // Reddit 'core-embed/reverbnation', // ReverbNation 'core-embed/screencast', // Screencast 'core-embed/scribd', // Scribd 'core-embed/slideshare', // Slideshare 'core-embed/smugmug', // SmugMug 'core-embed/speaker-deck', // Speaker Deck 'core-embed/ted', // TED 'core-embed/tumblr', // Tumblr 'core-embed/videopress', // VideoPress 'core-embed/wordpress-tv', // WordPress.tv // 再利用ブロック 'core/block', // 再利用ブロック ); 投稿タイプ $post->post_type === 'post' //投稿 $post->post_type === 'page' //固定ページ $post->post_type === 'カスタム投稿スラグ' //カスタム投稿 WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法

WordPress（ワードプレス）を使ってサイトを作る際に、既に別サイト（同一サーバー内）で作成しているコンテンツなどを共有して制作したい場合（本サイトとは別のデータベースを読み込みたい場合）の対応方法をメモ。 function.php（PHP） //他のデータベースに接続 $another_db_user = 'データーベースユーザー名'; $another_db_pass = 'データーベースパスワード'; $another_db_name = 'データーベース名'; $another_db_host = 'データーベースホスト名'; $another_tb_prefix = 'wp○○_'; $another_wpdb = new wpdb($another_db_user, $another_db_pass, $another_db_name, $another_db_host); $another_wpdb->set_prefix($another_tb_prefix); 読み込みページ（PHP） こちらのサンプルでは追加で読み込むデータベースもワードプレスを使用し、投稿一覧の内容を表示しています。 /* Template Name: 読み込みに使用するページのテンプレート名 */ //SQLでデーターベースに直接アクセスして、情報をとる $result = $another_wpdb->get_results(' SELECT * FROM '.$another_wpdb->posts.' WHERE post_type = "post" && post_status = "publish" ORDER BY post_date DESC '); foreach ($result as $value) { $the_post_id = $value->ID; // カテゴリとアイキャッチを取得したい投稿のID //カテゴリーの取得 $categories = ''; $get_term_relationships_res = $another_wpdb->get_results('SELECT '.$another_wpdb->term_relationships.'.term_taxonomy_id as term_taxonomy_id FROM '.$another_wpdb->term_relationships.', '.$another_wpdb->term_taxonomy.' WHERE '.$another_wpdb->term_relationships.'.term_taxonomy_id = '.$another_wpdb->term_taxonomy.'.term_taxonomy_id && '.$another_wpdb->term_relationships.'.object_id = "'.$the_post_id.'" && '.$another_wpdb->term_taxonomy.'.taxonomy = "category"'); foreach($get_term_relationships_res as $row_term_relationships){ $get_terms_res = $another_wpdb->get_results('SELECT name FROM '.$another_wpdb->terms.' WHERE term_id = "'.$row_term_relationships->term_taxonomy_id.'"'); foreach($get_terms_res as $row_terms){ $categories .= $row_terms->name; } } //アイキャッチの取得 $get_postmeta_res = $another_wpdb->get_results('SELECT meta_value FROM '.$another_wpdb->postmeta.' WHERE meta_key = "_thumbnail_id" && post_id = "'.$the_post_id.'"'); foreach ($get_postmeta_res as $row_get_postmeta ) { $get_attachment_res = $another_wpdb->get_results('SELECT * FROM '.$another_wpdb->posts.' WHERE post_type = "attachment" && ID="'.$row_get_postmeta->meta_value.'"'); foreach($get_attachment_res as $row_get_attachment){ $eyecatch = $row_get_attachment->guid; } } //表示内容 echo('<li class="post"> <span class="cat-name">'.$categories.'</span> <a href="'.$value->ID.'"> <figure class="eyecatch"><img src="'.$eyecatch.'"></figure> <div class="entry-content"> <h2 class="entry-title">'.$value->post_title.'</h2> <p class="entry-meta">'.$value->post_date.'</p> <p class="description">'.mb_substr(strip_tags($value->post_content), 0, 50, 'UTF-8').'</p> </div> </a> </li>'); }

「All in One SEO Pack」では専用の入力項目から各記事のタイトルタグを自由に設定できるのですが、いくつも記事を投稿した後で個別に変更していくのは大変ということで、一括でタイトルタグを変更した際に使用した方法をメモ。 function.php（PHP） add_filter( 'aioseop_title', 'changetitle'); function changetitle($title) { if ( is_single() ) { $categories = get_the_category($post->ID); $cat = $categories[0]; if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); } $title = get_the_title($ID).' | '.$cat-> cat_name.' | '.get_bloginfo('name'); } return trim( $title ); } 上記のコードを、使用しているテーマの「function.php」に追記。「add_filter」を使用して「All in One SEO Pack」内で使われている「aioseop_title」という関数にフックすることで、関数呼び出し時に追加で作成した関数が機能するように設定。今回は投稿記事のみということで「is_single()」の場合にのみ適応しています。

WordPress（ワードプレス）のプラグイン作成時にカスタム投稿を利用せず、独自のテーブルを作成する場合の実装方法をメモ。 PHP function create_tables(){ global $wpdb; $charset_collate = ""; $table_name = $wpdb->prefix . '○○○○'; // charsetを指定する $charset_collate = $wpdb->get_charset_collate(); // SQL文でテーブルを作る $sql = "CREATE TABLE {$table_name} ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(255) NOT NULL, memo text NOT NULL, del_flg int(11) NOT NULL, create_date datetime NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (id) ) {$charset_collate} AUTO_INCREMENT=1;"; require_once( ABSPATH . 'wp-admin/includes/upgrade.php' ); dbDelta($sql); } // 有効にした時に引数で指定したファンクションを実行 register_activation_hook( __FILE__, 'create_tables' ); 「$table_name」の部分で、新規に追加するテーブル名を、「$sql」の部分に追加したいカラムの情報を記載する。※データベースを複数追加する場合は「SQL文（$sql）」と「dbDelta(○○○○)」を必要な数分記載。 参考までに、プラグイン停止時、または削除時にアクションを実行したい場合は下記の関数を使用。 PHP // 停止した時に引数で指定したファンクションを実行 register_deactivation_hook(__FILE__, $function); // アンインストールした時に引数で指定したファンクションを実行 register_uninstall_hook(__FILE__, $function); //例：アンインストール時に前述のテーブルを削除する場合 function delete_table(){ global $wpdb; $table_name = $wpdb->prefix.'○○○○'; $sql = 'DROP TABLE '.$table_name; $wpdb->query($sql); } register_uninstall_hook( __FILE__, 'delete_table' ); WordPressのプラグインでデータベースを作成・削除・アップデートする方法 プラグインでデータベーステーブルを作る

WordPress（ワードプレス）を使用してホームページの制作を行う際、全てのページを同一ディレクトリ内（ワードプレス内）で作成することが多いのですが、場合によっては新着情報のみをワードプレスで作成し、固定ページを外部ディレクトリで作成する場合もあったりします。そんな時に、ヘッダー部分などをPHPをつかって共有する方法をメモ。 PHP require_once ('./wp-blog-header.php'); ワードプレス内の「wp-blog-header.php」を使用したいファイルで読み込むだけ。テーマファイルを読み込む必要がない場合は「wp-load.php」でも良いです。 WordPressのテンプレートタグやデータベースの情報を外部ファイルから利用する

カスタム投稿タイプは、独立したコンテンツを作りたい場合に便利なワードプレスの追加機能。Wordpress（ワードプレス）を長く使用していると一般的な投稿（お知らせ・新着情報）以外にも実績やお役立ち情報など、一般投稿とは切り分けたコンテンツの投稿が必要となる場合がある。投稿カテゴリーを使って、投稿を切り分けるのもできるが、管理画面が一目でわかりにくいので、今回はカスタム投稿タイプを使って独自の投稿機能を設ける方法をメモ。 functions.php // カスタム投稿タイプの追加 add_action('init', 'create_post_type' ); function create_post_type(){ register_post_type('test', // 投稿タイプ名の定義 array( 'labels' => array( 'name' => __( '独自コンテンツ' ), // 表示する投稿タイプ名 'singular_name' => __( '独自コンテンツ' ) ), 'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields', 'excerpt', 'author', 'trackbacks', 'comments', 'revisions', 'page-attributes' ), 'public' => true, 'menu_position' =>5, 'has_archive' => true, 'show_in_rest' => true, /* グーテンベルクを有効 */ ) ); //カテゴリタイプの設定（カスタムタクソノミーの設定） register_taxonomy( 'testcat', //カテゴリー名（任意） 'test', //カスタム投稿名 array( 'hierarchical' => true, 'update_count_callback' => '_update_post_term_count', 'label' => '独自コンテンツのカテゴリー', //表示させる名前 'public' => true, 'show_ui' => true, 'show_in_rest' => true, ) ); //タグタイプの設定（カスタムタクソノミーの設定） register_taxonomy( 'testtag', //タグ名（任意） 'test', //カスタム投稿名 array( 'hierarchical' => false, 'update_count_callback' => '_update_post_term_count', 'label' => '独自コンテンツのタグ', //表示させる名前 'public' => true, 'show_ui' => true, 'show_in_rest' => true, ) ); } カスタム投稿の追加の仕方と、具体的な使用例WordPressのGutenbergにおけるカスタム投稿タイプでカテゴリー一覧が表示されない場合カスタム投稿タイプの表示側、管理画面側のいろいろをカスタマイズする

Wordpress（ワードプレス）のカスタマイズ時にテンプレートにコードを直書きするのでも表示はできるのだけれど、投稿や固定ページで自由に組み合わせて流用したい場合に「ショートコード（例：[shortcode]）」を作成しておくと便利だったので作成方法をメモ。 function.php 下記のコードを「function.php」に追加。利用目的に合わせて属性を付与したり、しなかったりする。 shortcode_atts( ショートコード名 , 属性（任意）, 使用するファンクション ); 属性の無いショートコード（[test]）の場合 投稿（固定ページ）の編集画面でソースブロックを選択後、[test]と記載することで設定された文字が表示できる。 function display_func() { return 'ショートコード[test]の中身が表示される'; } add_shortcode('test', 'display_func'); 属性があるショートコード（[test value1=○○○○]）の場合 ○○○○の部分に文字を入れることで、表示内容を都度変更して表示できる。設定の無い場合は初期値を表示。 function display_func( $atts ) { $atts = shortcode_atts( array( 'value1' => 'value1の初期値', ), $atts, 'test' ); return 'ショートコード[test]の'.$atts['value1'].'が表示される'; } add_shortcode( 'test', 'display_func' ); 属性が複数のショートコード（[test value1=○○○○ value2=○○○○]）の場合 function display_func( $atts ) { $atts = shortcode_atts( array( 'value1' => 'value1の初期値', 'value2' => 'value2の初期値', ), $atts, 'test' ); return 'ショートコード[test]の'.$atts['value1'].'と'.$atts['value2'].'が表示される'; } add_shortcode( 'test', 'display_func' ); PHP（呼び出し時） <?php echo do_shortcode('[test value1=○○○○ value2=○○○○]'); ?> 投稿機能よりブロック要素（ショートコード）を設置して記載する場合は「[test value1=○○○○ value2=○○○○]」で問題ないが、各種PHPファイルに直書きする場合は上記方法を使用 ショートコード API - WordPress Codex 日本語版