30 3月, 2020

WordPress投稿記事の無駄なhタグを削除

WordPressの投稿記事で使用するHTMLのタグ h1、h2・・・は当然、記事の内容に合わせて作成します。
投稿記事のページのソースを見てみると余計な h2、h6 タグがWordPressのテーマのプログラムから出力されているのに気が付きました。
投稿記事以外で使われてほしくないし、SEO的にもよくないので消します。
※「Nifty Lite」テーマや元の「Specia」テーマのプログラムを直接修正します。
プログラムの修正は、まず管理者でログインして「外観」の「テーマエディタ」をクリックします。
テーマエディタで使用しているプログラムが表示されるので対象プログラムを選択して修正します。

－　目次　－

サイドバーの「最近の投稿」で使ってるh3タグを削除
表示ページタイトルの投稿記事名にあるh2タグを削除
投稿記事名表示のタグh2をh1に修正
投稿日のh6タグを削除

１．サイドバーの「最近の投稿」で使ってるh3タグを削除

いきなりh3からですか！って思いました。
投稿記事を書く人以外が見出しや段落のhタグを出力するのは理解できないので消します。

修正プログラム：Specia: sidebar.php (inc/sidebar/sidebar.php)

無難に「h3」を「p」タグに置き換えます。

２．表示ページタイトルの投稿記事名にあるh2タグを削除

同じ情報を2か所に表示するのは無駄なのでついでにまるごと消すことにします。
いるのであればタグのみ削除すればOKです。

修正プログラム：Nifty Lite: specia-breadcrumb.php (sections/specia-breadcrumb.php)

コメントタグで出力しないようにします。
72行目（修正前：col-md-6 col-xs-12 col-sm-6）はbootstrapグリッドシステムの列がずれないよう調整しています。

３．投稿記事名表示のタグh2をh1に修正

titleとh2タグに同じ投稿記事名が使われてるのですがなぜかh1はありません。
理解できないし意味不明なのでh1に書き換えます。
※titleはページを外から見た人向けに、 h1はサイト閲覧している人向けで使い分けます。
　同じでなくてもよいようなのですがシンプルに同じにしています。

修正プログラム：Specia: content-page.php (template-parts/content-page.php)

h2タグの記述をh1に修正します。

４．投稿日のh6タグを削除

投稿日になぜかh6タグがついています。
しかも見た目が気に入らないので消します。

修正プログラム：Specia: content-page.php (template-parts/content-page.php)

12行目と17行目のコメントタグで無効にします。

26 3月, 2020

Oacle Express Edition 18c でIPアドレス変更（DHCP）に対応させる

Oracleの勉強用としてWindows10にインストールして使う場合はほとんどDHCPの環境になると思います。
DHCPでも割り当てられるIPがかわることはあまりないかもしれませんが変われば動かなくなるのでとりあえず動作する手順をまとめておきます。
※Oracleを運用環境で利用する手順ではありませんし正しい手順でないことを理解頂き自己責任で参考にしてください。

IPアドレスが記載されている以下のファイルをホスト名に変更します。

・listener.ora
・tnsnames.ora

インストール時のIPアドレスとホスト名です。
インストール後にIPアドレスを「192.168.0.11」から「192.168.0.19」に変えてsqlplusで接続できるか確認します。

インストール後の「listener.ora」の状態です。
※ファイルの場所は1行目に記載されています。

# listener.ora Network Configuration File: C:\app\own\product\18.0.0\dbhomeXE\NETWORK\ADMIN\listener.ora
# Generated by Oracle configuration tools.

DEFAULT_SERVICE_LISTENER = XE

SID_LIST_LISTENER =
  (SID_LIST =
    (SID_DESC =
      (SID_NAME = CLRExtProc)
      (ORACLE_HOME = C:\app\own\product\18.0.0\dbhomeXE)
      (PROGRAM = extproc)
      (ENVS = "EXTPROC_DLLS=ONLY:C:\app\own\product\18.0.0\dbhomeXE\bin\oraclr18.dll")
    )
  )

LISTENER =
  (DESCRIPTION_LIST =
    (DESCRIPTION =
      (ADDRESS = (PROTOCOL = TCP)(HOST = 192.168.0.11)(PORT = 1521))
      (ADDRESS = (PROTOCOL = IPC)(KEY = EXTPROC1521))
    )
  )

インストール後の「tnsnames.ora」の状態です。
※ファイルの場所は1行目に記載されています。

# tnsnames.ora Network Configuration File: C:\app\own\product\18.0.0\dbhomeXE\NETWORK\ADMIN\tnsnames.ora
# Generated by Oracle configuration tools.

XE =
  (DESCRIPTION =
    (ADDRESS = (PROTOCOL = TCP)(HOST = 192.168.0.11)(PORT = 1521))
    (CONNECT_DATA =
      (SERVER = DEDICATED)
      (SERVICE_NAME = XE)
    )
  )

LISTENER_XE =
  (ADDRESS = (PROTOCOL = TCP)(HOST = 192.168.0.11)(PORT = 1521))


ORACLR_CONNECTION_DATA =
  (DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = IPC)(KEY = EXTPROC1521))
    )
    (CONNECT_DATA =
      (SID = CLRExtProc)
      (PRESENTATION = RO)
    )
  )

「listener.ora」と「tnsnames.ora」ファイルのIPアドレス記載箇所をホスト名に修正して保存します。
DBまたはOSを再起動します。
変更後のIPアドレスでも接続できるのでIPが変更されても接続できる状態と確認できます。

25 3月, 2020

Oracle Express Edition の基本的な使い方

コンテナデータベースは利用しないので正直使い方がぴんときません。
勉強のためにインストール直後からDOSでOracle Express Edition（Oracle XE）を利用するための基本的なコマンドのまとめになります。

－　目次　－

プラガブルデータベース（XEPDB1）への接続切替
XEPDB1でユーザーの作成
XEPDB1のユーザーでログイン

参照：Oracle Express EditionをWindows10にインストール

１．プラガブルデータベース（XEPDB1）への接続切替

ひとまず管理者（SYS）で入ってプラガブルデータベース（XEPDB1）のセッションに変更します。

管理者ログイン：sqlplus sys/｛インストーラで入力したパスワード｝@XE as sysdba
※接続文字列「XE」はインストール時に作成されます。
※パスワード忘れた場合、OS認証を利用して「sqlplus / as sysdba」でも入れます。

セッション変更コマンド：alter session set container = XEPDB1;

２．XEPDB1でユーザーの作成

ここでのユーザーの作成は最低限のユーザーIDとパスワードのみとします。（表領域の指定などは省略）
勉強用として権限は制限なしでの利用を前提として DBA, resource, connect 権限を付与しておきます。

ユーザー作成コマンド：create user ｛作成するユーザーID｝ identified by ｛作成するユーザーIDで使用するパスワード｝

権限付与するコマンド：grant ｛付与する権限名｝ to ｛権限付与されるユーザーID｝;

３．XEPDB1のユーザーでログイン

IPv4アドレスとホスト名でのログインを説明します。
IPアドレスは、「ipconfig」コマンドで表示される「IPv4アドレス」の値です。
ホスト名は、「hostname」コマンドで表示される値です。

IPv4アドレスでログインします。

ログインコマンド：sqlplus ｛ユーザーID｝/｛パスワード｝@｛IPアドレス｝:｛ポート番号｝/｛プラガブルDB名｝
※インストールの説明でも記載していますが「localhost」は使用すると「リスナーがありません」とエラーになります。

ホスト名でログインします。
ログイン後のとおりテーブル作成やレコードの追加など利用可能になります。

ログインコマンド：sqlplus ｛ユーザーID｝/｛パスワード｝@//｛ホスト名｝:｛ポート番号｝/｛プラガブルDB名｝

25 3月, 2020

Oracle Express EditionをWindows10にインストール

Oracle（オラクル）無償版 Express Editionの18cをWindows10にインストールする手順をまとめます。

－　目次　－

Express Editionの制限
インストーラのダウンロード
インストール

※インストーラをダウンロードするにはオラクルのアカウントを作成（無料）する必要があります。
※64bit OSが対象です。
※ネットワークがDHCPを利用する場合、インストール後にIPアドレスが変更されるとリスナーが機能しなくなります。
IP固定またはDHCPに対応した作業が必要になります。

プラガブルデータベースへの接続までの基本的な使い方は以下を参照してください。
参照：Oracle Express Edition の基本的な使い方

DHCP環境で勉強用として利用したいときは以下を参考にしてください。
参照：Oacle Express Edition 18c でIPアドレス変更（DHCP）に対応させる

１．Express Editionの制限

Oracleのサイトに記載される制限の内容は以下の通りです。

・CPUは２コアまで自動的に制限
・論理環境（VM、コンテナ、物理ホスト）ごとに1つのインストールのみに制限
・ユーザー・データの最大量は、12GBまで利用可能
・RAMの最大量は、2GBまでに制限

「出典元」Oracle Database XE　インストレーション・ガイドfor Microsoft Windows　4 ライセンス制限

２．インストーラのダウンロード

Oracleのサイトよりインストーラをダウンロードします。
ダウンロードするには「Oracle Database 18c Express Edition for Windows x64 Download」のリンクをクリックします。

「出典元」Oracle Database Express Edition (XE) Release 18.4.0.0.0 (18c)

オラクルのアカウントを入力して「サインイン」をクリックするとインストーラがダウンロードされます。

３．インストール

ダウンロードしたZIPを解凍して「setup.exe」を実行します。
「次へ」ボタンをクリックします。

「次へ」ボタンをクリックします。

DBの管理者アカウント（SYS、SYSTEM、PDBADMIN）のパスワード（任意の値でOK、忘れずメモしてください。）を入力します。
「次へ」ボタンをクリックします。

「インストール」ボタンをクリックしてインストールします。

「アクセスを許可する」ボタンをクリックします。

「完了」ボタンをクリックします。
これでインストールは完了です。
注意！　自動的に作成されるリスナー名「LISTENER」は1521ポートでリスニングしていますが外部アドレスでリスニングしているために localhost(127.0.0.1)は利用できません。使用すると「リスナーがありません」とエラーになります。このせいでちょっとハマりました・・・つまり下図の記載は間違いです。

20 3月, 2020

MySQLをWindows10にインストール

いろいろ説明があるのにハマりますね・・・私だけかもしれませんが・・・
MySQL（Version 8.0.19）インストーラのダウンロードからインストールまでの手順をハマらないように備忘録をとります。

－　目次　－

インストーラのダウンロード
インストール
MySQLにパスを通す

確認を含め最初に使用することになるコマンドは以下を参考にしてください。

参照：MySQLの基本的なコマンドの使い方

１．インストーラのダウンロード

インストーラのダウンロードのときによく見るとx86-32bitとあるのに64bitが見当たらない・・・探しても見つからない・・・
実は、32bitだけしか記載してないのに64bitも入っています！！！
ここでは、mysql-installer-community-8.0.19.0.msi をダウンロードしますので「Download」ボタンをクリックします。

「出典元」Oracle MySQL Community Downloads

ログインしなくても「No thanks, just start my download.」のリンクからダウンロードできます。

２．インストール

ここでは、Developper Default でセットアップします。
「Next」ボタンをクリックします。

先に「Execute」ボタンをクリックします。
※「Next」ボタンを先に押すと先にで意味不明なエラーが発生します。
　「Execute」ボタンはインストールする依存関係で必要なものを先にダウンロードしてインストールするようです。

「ライセンス条項および使用条件に同意する」にチェックをつけて有効になった「インストール」ボタンを押します。

「I have read and accept the lisence terms.」にチェックをつけて有効になった「Install」ボタンを押します。

「Finish」ボタンを押します。

「Next」ボタンを押します。

プロダクトの条件を満たしてないものがある？？？と意味不明なメッセージが表示されます。
気にせずインストールをつづけるか？と聞かれてるので「Yes」ボタンを押します。
※インストールオプションでOfficeやVisual Studioなどが入っていないといけないプロダクトが含まれているからかと思いました。
　カスタムで調整したのに必ず表示されます・・・同様の手順で行ってる人もおり問題ないと判断しています。

「Execute」ボタンを押します。

全てのプロダクトのインストールが完了すると「Next」ボタンを押します。

「Next」ボタンを押します。

ここでは「Standalone MySQL Server / Classic MySQL Replication」を選択します。
「Next」ボタンを押します。

ネットワークの構成はこのままでいきます。
「Next」ボタンを押します。

ここでは「Use Strong Password Encryption for Authentication(RECOMMENDED)」を選択します。
「Next」ボタンを押します。

rootアカウントのパスワードを「MySQL Root Password」と「Request Password」に入力します。
「Next」ボタンを押します。

このままの設定で利用します。
「Next」ボタンを押します。

「Execute」ボタンを押します。

「Finish」ボタンを押します。

「Next」ボタンを押します。

「Finish」ボタンを押します。

「Next」ボタンを押します。

Passwordにrootアカウントのパスワードを入力します。
「Check」ボタンを押します。

「Next」ボタンを押します。

「Execute」ボタンを押します。

「Finish」ボタンを押します。

「Next」ボタンを押します。

セットアップ終了後に起動させたくないのでチェックは全て外しておきます。
「Finish」ボタンを押します。

３．MySQLにパスを通す

mysqlコマンドを実行したらないといわれました！
コマンドへのパスを通してくれないみたいなので設定します。
コントロールパネルにある「システムの詳細設定」をクリックします。

詳細設定タブの下の方にある「環境変数」ボタンをクリックします。

ユーザー環境変数にある「編集」ボタンをクリックします。

これがMySQLインストール直後の状態です。
「新規」ボタンをクリックしてmysqlコマンドのあるパス「C:\Program Files\MySQL\MySQL Server 8.0\bin\」を入力します。
「OK」ボタンをクリックします。
※OSを再起動してください。

これでmysqlコマンドが使えるようになりました。

15 3月, 2020

WordPress投稿ページからのダウンロード（WordPress Download Manager）

ファイル（ZipやPDFなど）を投稿ページからダウンロードするプラグイン（WordPress Download Manager）を導入します。
※WordPress Download Managerプラグインはダウンロードファイルサイズが扱えるファイルが5MBと小さいのです。
※日本語ファイル名をアップするとダウンロード時に文字化けします。

プラグインの導入方法は以下のページに記載していますので導入手順は省略します。

参照：WordPressでプラグインの追加方法

ダウンロードするにはダウンロードページを作成してリンクを埋め込む手順となります。

－　目次　－

ダウンロードページの作成
ダウンロードリンクの埋込

１．ダウンロードページの作成

WordPress管理者でログインして「Downloads」の「Add New」をクリックします。
ダウンロードするファイルのタイトルと説明を記入します。

ダウンロードするファイルを「Drop file heare」へドロップします。

「公開」にある「更新」をクリックして保存します。
「Downloads」の「All Files」をクリックします。

作成された「Short-code」の値をメモします。

２．ダウンロードページの埋込

作成する投稿の編集するページにメモした「Short-code」の値を「テキスト」で記述します。

プレビューすると以下のように表示されます。

ダウンロードするファイルの説明のリンクをクリックすると説明のページを表示します。

14 3月, 2020

コピペでダブルコーテーションやシングルコーテーションが勝手に変換される

WordPressの仕様だなんて知りませんでした。
コード例記載しているのにコピペしたら半角が全角になっていてびっくり！
調べて変換されないように対応しました。

WordPressの管理者でログインして「外観」の「テーマエディター」をクリックします。
「テーマのための関数 (functions.php)」をクリックします。

2行目のコードを追記して下方にある「ファイルの更新」をクリックします。
コード：remove_filter("the_content", "wptexturize");

これでコピペしても半角が全角に変換されることがなくなります。

8 3月, 2020

WordPressの投稿記事でカテゴリ関連記事一覧の追加

投稿記事のカテゴリで同一の関連記事を一覧で表示しているページがあります。
投稿記事のページは全て同じように関連記事の一覧を表示したいのでプラグインでなくプログラムを修正することにしました。
とはいえ採用したテーマやCSSの構成を把握するのも面倒なのでかなり手抜きですが参考程度に備忘録としますのでご容赦願います。

完成イメージ

投稿記事表示ページのプログラム修正

WordPressに管理者でログインして「外観」の「テーマエディター」をクリックします。
使用しているテーマは無料の「Nifty Lite」なので継承元の「Specia」リンクをクリックします。

「個別投稿（single.php）」をクリックします。

赤字の部分が追記したコードになります。
太字の部分はタイトルなど数値の10は最大10記事を表示します。
記事がなければ表示しません。
簡単なHTMLやサーバーサイドスクリプト言語を理解できれば難しくない内容かと思いますのでコピペしていい感じに修正して利用してください。

<section class="page-wrapper">
<div class="container">
<div class="row padding-top-60 padding-bottom-60">

<div class="<?php specia_post_column(); ?>" >
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>
<?php get_template_part('template-parts/content','page'); ?>
<?php endwhile; ?>
<?php comments_template( '', true ); // show comments ?>
<?php else: ?>
<?php get_template_part('template-parts/content','none'); ?>
<?php endif; ?>
<?php
$categ = get_the_category($post->ID);
$catID = array();

foreach($categ as $cat){
array_push($catID, $cat -> cat_ID);
}

$args = array(
'post__not_in' => array($post->ID),
'category__in' => $catID,
'posts_per_page' => 10,
'orderby' => 'rand'
);

$the_query = new WP_Query($args);
if($the_query -> have_posts()) :?>
<b>関連記事</b>
<table>
    <tr>
        <td bgcolor="midnightblue" width="120"><font color="white">画像</font></td>
        <td bgcolor="midnightblue"><font color="white">タイトル</font></td>
    </tr>
<?php while($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <tr>
        <td>
        <a href="<?php the_permalink(); ?>">
            <?php if(has_post_thumbnail()): the_post_thumbnail('thumbnail'); endif; ?>
        </a>
        </td>
        <td valign="top">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </td>
    </tr>
<?php endwhile; ?>
</table>
<?php endif; wp_reset_postdata(); ?>
<div class="clearfix"></div>
            </div>
            
                <?php get_sidebar(); ?>
        </div>
    </div>
</section>

画像拡大ポップアップ表示（WP jQuery Lightbox）

画像をページに貼り付けると縮小しないとみれないサイズの場合もあります。
ページの説明などがあるのでポップアップで画像のみ拡大表示させる WP jQuery Lightbox プラグインを利用することにしました。
数あるプラグインの中から選んだ理由は使いたい機能のみのシンプルな構成になっているからです。
プラグインの導入方法は以下のページに記載していますので導入手順は省略します。

参照：WordPressでプラグインの追加方法

拡大イメージのサンプル

－　目次　－

WP jQuery Lightbox プラグインの設定
拡大画像の設定方法

１．WP jQuery Lightbox プラグインの設定

WordPress管理者でログインして「設定」の「jQuery Lightbox」をクリックします。
画像はデバイスに合わせたサイズで見るほうが使いやすいと考えるので「スクリーンサイズに合わせて画像を縮小」にチェックして「設定保存」をクリックします。

２．拡大画像の設定方法

メディアで追加した画像を選択します。
上側に表示される鉛筆のアイコンをクリックして設定を行います。
※クリックする画像はビジュアルタブを選択すると表示されます。

ここではページに中で表示しているので拡大ではフルサイズで見せたいのでリンク先に「メディアファイル」を選択します。
キャプションにクリックしたら画像拡大しますよと説明文を記述して「更新」ボタンをクリックします。
これで画像クリックされたら画像を登録した時のサイズでポップアップ表示されます。
※登録する画像を分けて見せることもできます。