VSCodeを使ってAWS EC2にSSH接続

VS code AWS

pemファイルはをユーザ配下の.sshフォルダに入れる

pemファイルは鍵になることも証明書になること、両方になることも出来るファイルのこと。

VS codeでリモート接続

リモートエクスプローラーのリモート＞SSHにカーソル合わせる
＋ボタンクリックでSSH接続コマンドのウィンドウが立ち上がる

ssh -i [pemキーのパス] [User]@[HostName]

下にconfigを開くポップアップが出るので、開く

Host [名前自由]
  HostName [HostName]
  IdentityFile [pemキーのパス]
  User bitnami

リモートエクスプローラーのリモートにカーソルを合わせ、右の読み込みボタンを押すとSSHフォルダ配下に追加されている。

追加されたフォルダの右のボタンから接続可能

パーミッションエラー

最初だけ権限でエラーが出るので、ターミナルからキーを保存したフォルダに移動

$chmod 600 [pemファイル名]

もう一度接続すると接続可能になりました。

VSCodeを使ってAWS EC2のソースコードを編集する - Qiita

MacでSSH接続→Permissions 0644 for 'xxx.key' are too open. - カスタマイズ

2023-01-23

WP カスタムフィールドSCF（繰り返し）とACF（必須）

WordPress

投稿ページでカスタムフィールドを複製したい時に便利なのがスマートカスタムフィールドSCF。

SCFは必須指定ができないので、必須指定をしたい時はACF（アドバンスカスタムフィールド）を使用する。

Smart Custom Fields (SCF)の使い方

1.Smart Custom Fields (SCF)をインストール

2.項目を設定

3.値を入力

項目を設定したページから値を設定（投稿ページなど）

4.出力

//テキスト
<a href="<?php echo SCF::get('link'); ?>" target="_blank"><?php echo SCF::get('link'); ?></a>

//画像
<?php
$image = SCF::get('img');
echo wp_get_attachment_image($image, 'large');
?>

繰り返しの表示

<?php
$customer = SCF::get('customer');
foreach ($customer as $fields) { ?>

    <div class="quality-box__img">
        <?= wp_get_attachment_image($fields['img'], 'large'); ?>
    </div>

    <h3 class="quality-box__title">
        <span class="quality-box__title-en"><?= $fields['title_en'] ?></span>
        <?= $fields['title_ja']; ?>
    </h3>

    <div class="quality-box__txt">
        <?= $fields['txt'] ?>
    </div>
    
<?php } ?>

2023-01-23

js ドロップダウンメニュー(複数）

JavaScript

<script>
    const hasChild = document.querySelectorAll('.menu-item-has-children');
    const submenu = document.querySelectorAll('.sub-menu');

    for (let i in hasChild) {
        if (hasChild[i]) {
            hasChild[i].addEventListener('mouseover', function() {
                submenu[i].classList.add('down');
                hasChild[i].addEventListener('mouseleave', function() {
                    submenu[i].classList.remove('down');
                });
            });
        }
    }
</script>

2023-01-23

WP all in one WP Migration extension の使い方

解凍したフォルダをwp-content/plugin/直下にフォルダごと入れる。(『all-in-one-wp-migration-multisite-extension』)
WPダッシュボードからプラグインで有効化する
更新をする
インポート画面でファイルサイズがunlimitになっているか確認

2023-01-19

WP 投稿ページの関連記事から表示中の記事を除外

WordPress

<?php
$args = array(
    'posts_per_page' => 3,
    'category' => $cats[0]->term_id,
    'post__not_in' => array($post->ID)
);
$posts = get_posts($args);
foreach ($posts as $post) :
    setup_postdata($post); // 記事データの取得
?>
    <?php get_template_part('template-parts/loop', 'article'); ?>
<?php
endforeach;
wp_reset_postdata();
?>

参考にした記事は下記です！感謝です！

theorthodoxworks.com

2023-01-19

WP 投稿IDからサムネイルを取得する関数

WordPress

functions.php

/**
 * 投稿IDからアイキャッチ画像のURLを取得
 */
//no-img取得
define("DIRE", get_template_directory_uri());   //テンプレートディレクトリまでのURL
define("NOIMG", DIRE . "/img/no_img.png");  //NoImage画像のURL

//関数定義
function get_thumb_url($size = 'full', $post_id = null)
{
    $post_id = ($post_id) ? $post_id : get_the_ID();

    if (!has_post_thumbnail($post_id)) return NOIMG;

    $thumb_id = get_post_thumbnail_id($post_id);
    $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
    $thumb_src = $thumb_img[0];

    return $thumb_src;
}

この関数を使いたい箇所で下記のように記述

<?php

$post_id = get_field('rank_1')->ID;　//これはカスタムフィールドの場合

echo '<img src="' . get_thumb_url($post_id) . '" alt="">';
?>

参考にしたのは下記です！感謝です！

wemo.tech

2023-01-17

WP Breadcrumb NavXTでリンクなしにする

WordPress

Breadcrumb NavXTはパンクズリストを表示させたい箇所に下記を記述

<div class="breadcrumb">
    <div class="breadcrumb__inner">
        <?php
        if (function_exists('bcn_display')) {
            bcn_display();
        }
        ?>
    </div>
</div>

本題のBreadcrumb NavXTでリンクなしにするのは例えば、第３階層まであり、第２階層をリンクさせたくないときはfunctions.phpに下記を記述します。

functions.php

**
 * Breadcrumb NavXTで特定ページをリンクなしにする
 */
add_filter('bcn_breadcrumb_url', 'my_breadcrumb_url_stripper', 10, 3);
function my_breadcrumb_url_stripper($url, $type, $id)
{
    if (in_array('post-page', $type) && (int) $id === 5) {
        $url = '';
    }
    return $url;
}