WordPress（UX) – OSBLOG

2019年10月22日2019年10月22日

画像に文字を載せる方法

すっかり忘れてWindowsのpaintnetで画像に文字を貼り付けてWordPressにアップロードしていたが、以前に「画像に文字を載せる方法」なるものを見つけメモっておいたのを思い出し早速トライ。

<div style="position: relative;">
<a href="xxx.jpg"><img class="aligncenter size-medium wp-image-xxx" alt="メディア追加" src="http://xxx-xxxxxx.jpg" width="xxx" height="xx" /></a>
<div style="position: absolute; top: xxxpx; left: xxxpx;">
<span style="color: #xxxxx;">☆ Xfce4-Desktop ☆</span>
</div></div>
＊フォントサイズ："font-size: 1.5em" 1.5倍とかを<span style=へ。
*メディア追加で貼り付けた画像の大きさから文字の位置をpxで決める。

<span style="color: #xxxxx;">☆ Xfce4-Desktop ☆</span>

</div></div>

＊フォントサイズ："font-size: 1.5em" 1.5倍とかを<span style=へ。

*メディア追加で貼り付けた画像の大きさから文字の位置をpxで決める。

☆ Xfce4-Desktop ☆

簡単に画像に文字を載せることができたのでビックリ！でもサイトのメインページ上の画像に文字を乗せる程度になるのかな？
PS. よくよく調べてみるとブロックエディター（Gutenburg)に画像上に文字を乗せる機能があるとのこと！な〜んだ(T_T)

2019年8月24日2019年10月22日

フロントページにアイキャッチ画像付き新着情報

久しぶりに「Twentyseventeen」を見直して見ようかと思ったけど、気に入ったプラグインの利用で変更する箇所が無いので、アイキャッチ画像で新着情報をフロントページに乗せることを試みた。表示する新着の投稿記事には、一定の期間「NEW!」マークを付けた。

1] functions.phpに記述

function getCatItems($atts, $content = null) {
	extract(shortcode_atts(array(
	  "num" => '2',
	  "cat" => '12'
	), $atts));
// 処理中のpost変数をoldpost変数に退避
	global $post;
	$oldpost = $post;
// カテゴリーの記事データ取得
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	$newDispDays = 7 * 24 * 60 * 60;	// 「New」を表示する日数（公開日から7日間）
	$today = date_i18n('U');	// 本日の日付の秒数
	if($myposts) {
	// 記事がある場合↓
		$retHtml = '<div class="getPostDispArea">';
	// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
		// 投稿ごとの区切りのdiv
			$retHtml .= '<div class="getPost">';
		// 記事オブジェクトの整形
			setup_postdata($post);
		// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
			// サムネイルがある場合↓
				$retHtml .= '<div class="getPostImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';
			} else {
			// サムネイルがない場合↓※何も表示しない
				$retHtml .= '';
			}
		// 文章のみのエリアをdivで囲う
			$retHtml .= '<div class="getPostStringArea">';
		// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			$retHtml .= '<span><font color=#ff0000;">投稿日</font>：[' . $year . '年' . $month . '月' . $day . '日] </span>';
			// 投稿日の秒数を取得
			$entryDay = get_the_time('U');
			// 経過日数を取得
			$elapsedDays = $today - $entryDay;
			// タイトル設定(リンクも設定する)
			$retHtml.= '<h4 class="title">';
			// 7日経過していない？
			if( $newDispDays > $elapsedDays ){
				$retHtml.= '<span style="color:red">NEW! </span>';
			}
		// タイトル設定(リンクも設定する)
			$retHtml.= '<span class="getPostTitle">';
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</span></h4>';
		// 本文を抜粋して取得
			$getString = get_the_excerpt();
			$retHtml.= '<div class="getPostContent"><font color="#339966">' . $getString . '</font></div>';
			$retHtml.= '</div></div>';
		endforeach;
		$retHtml.= '</div>';
	} else {
	// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
// oldpost変数をpost変数に戻す
	$post = $oldpost;
	return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCategoryArticle", "getCatItems");
-------------
＊Shortcode: 投稿・固定ページへ
    [getCategoryArticle] [getCategoryArticle num="1" cat="5"]

function getCatItems($atts, $content = null) {

extract(shortcode_atts(array(

"num" => '2',

"cat" => '12'

), $atts));

// 処理中のpost変数をoldpost変数に退避

global $post;

$oldpost = $post;

// カテゴリーの記事データ取得

$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);

$newDispDays = 7 * 24 * 60 * 60; // 「New」を表示する日数（公開日から7日間）

$today = date_i18n('U'); // 本日の日付の秒数

if($myposts) {

// 記事がある場合↓

$retHtml = '<div class="getPostDispArea">';

// 取得した記事の個数分繰り返す

foreach($myposts as $post) :

// 投稿ごとの区切りのdiv

$retHtml .= '<div class="getPost">';

// 記事オブジェクトの整形

setup_postdata($post);

// サムネイルの有無チェック

if ( has_post_thumbnail() ) {

// サムネイルがある場合↓

$retHtml .= '<div class="getPostImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';

} else {

// サムネイルがない場合↓※何も表示しない

$retHtml .= '';

}

// 文章のみのエリアをdivで囲う

$retHtml .= '<div class="getPostStringArea">';

// 投稿年月日を取得

$year = get_the_time('Y'); // 年

$month = get_the_time('n'); // 月

$day = get_the_time('j'); // 日

$retHtml .= '<span><font color=#ff0000;">投稿日</font>：[' . $year . '年' . $month . '月' . $day . '日] </span>';

// 投稿日の秒数を取得

$entryDay = get_the_time('U');

// 経過日数を取得

$elapsedDays = $today - $entryDay;

// タイトル設定(リンクも設定する)

$retHtml.= '<h4 class="title">';

// 7日経過していない？

if( $newDispDays > $elapsedDays ){

$retHtml.= '<span style="color:red">NEW! </span>';

}

// タイトル設定(リンクも設定する)

$retHtml.= '<span class="getPostTitle">';

$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';

$retHtml.= '</span></h4>';

// 本文を抜粋して取得

$getString = get_the_excerpt();

$retHtml.= '<div class="getPostContent"><font color="#339966">' . $getString . '</font></div>';

$retHtml.= '</div></div>';

endforeach;

$retHtml.= '</div>';

} else {

// 記事がない場合↓

$retHtml='<p>記事がありません。</p>';

}

// oldpost変数をpost変数に戻す

$post = $oldpost;

return $retHtml;

}

// 呼び出しの指定

add_shortcode("getCategoryArticle", "getCatItems");

-------------

＊Shortcode: 投稿・固定ページへ

[getCategoryArticle] [getCategoryArticle num="1" cat="5"]

2] 続きを読む（more）の文字数の調整をfunctions.phpに記述

//概要（抜粋）の文字数調整
 function my_excerpt_length($length) {
 return 100;
 }
add_filter('excerpt_mblength', 'new_excerpt_mblength');

//概要（抜粋）の文字数調整

function my_excerpt_length($length) {

return 100;

}

add_filter('excerpt_mblength', 'new_excerpt_mblength');

3] style.cssに記述

.getPostDispArea .getPost {
    border: none;
    padding: 0.3em;
    margin: 0.5em 0px;
    background-color: #fff;
    font-size: 1.0em;
}
.getPostDispArea .getPost:after {
    content: '';
    display: block;
    clear: both;
}
.getPostImgArea {
    width: 23%;
    float: left;
}
.getPostStringArea {
    width: 77%;
    padding-left: 15px;
    float: left;
}
h4.getPostTitle {
    font-weight: bold;
}
.site-content {
    padding: 2em 0 0;/*画面幅48em未満*/
}
@media screen and (min-width: 48em) {
.site-content {
    padding: 2em 0 0;/*画面幅48em以上*/
    }
}
.single-featured-image-header {
    background-color: #fff;/*周りの色*/
    border-bottom: 0px solid #eee;/*画像下の線*/
    padding: 0 0 2em;/*画像下余白*/
}

.getPostDispArea .getPost {

border: none;

padding: 0.3em;

margin: 0.5em 0px;

background-color: #fff;

font-size: 1.0em;

}

.getPostDispArea .getPost:after {

content: '';

display: block;

clear: both;

}

.getPostImgArea {

width: 23%;

float: left;

}

.getPostStringArea {

width: 77%;

padding-left: 15px;

float: left;

}

h4.getPostTitle {

font-weight: bold;

}

.site-content {

padding: 2em 0 0;/*画面幅48em未満*/

}

@media screen and (min-width: 48em) {

.site-content {

padding: 2em 0 0;/*画面幅48em以上*/

}

.single-featured-image-header {

background-color: #fff;/*周りの色*/

border-bottom: 0px solid #eee;/*画像下の線*/

padding: 0 0 2em;/*画像下余白*/

}

サイトを巡って見つけたINCLOOP の「WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事（サムネイル、タイトル、投稿日、記事概要のみ抜粋）の一覧を表示する方法」を参考にした。

2019年8月23日2019年10月22日

投稿・固定ページのアイキャッチ画像を非表示にしたいと思いサイトで調べると、「sigle.phpのthumbnailの部分を削除又は非表示にする」との情報を得たので早速チェック、ところがthumbnailの記述がなかったので、他のphpを調べてみると「header.php」の中程に記述されてたので「//」で非表示、しかし投稿記事の上部にアイキャッチ画像が表示される。投稿ページ上なので「postフォルダーにあるcontent.php」をチェックするとアイキャッチ画像の部分があったので「＜！－－　ーー＞」で囲って試したところ、今度は間違いなく非表示できた。
1] header.php

  //if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
    //echo '<div class="single-featured-image-header">';
    //echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
    //echo '</div><!-- .single-featured-image-header -->';
  //endif;

//if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :

//echo '<div class="single-featured-image-header">';

//echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );

//echo '</div>';

//endif;

2] template-parts/post/content.php

  <!-- <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
    <div class="post-thumbnail">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
      </a>
    </div><!-- .post-thumbnail -->
  <?php endif; ?> -->

<!-- <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>

<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>

</a>

</div>

<?php endif; ?> -->

アイキャッチ画像の記述がどこにあるのか焦ったけど、なんとかアイキャッチ画像を非表示できた。

2019年8月4日2019年10月22日

フロントページに丸型アイコンでディレクトリ別記事一覧

SNSシェアボタンと違いメニューなので「FontAwesome」からメニューのアイコン（unicode）を選んで、CSSは「sns-share」をメニュー用に修正してstyle.cssに記述した。

【カテゴリー別記事一覧】

*各丸ボタンに変更（radius: 50%←15%、width: 40px、hight: 50px）

1] 丸型ボタンにするCSS 
.sns_circle{
    position:relative;
    width: 50px;　←40px
    height: 50px;
    margin:0 5px;
    -webkit-border-radius: 50%;　←15%
    -moz-border-radius: 50%;　←15%
    border-radius: 50%;　←15%
    background-color: #999;
    float:left;
    list-style: none;
}
2] リンク領域をブロック全体にするCSS
.sns_circle a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
   -webkit-border-radius: 50%;　←15%
   -moz-border-radius: 50%;　←15%
    border-radius: 50%;　←15%
    text-indent:-999px;
    color:#FFF: /*文字の色 */
}
3] フォント（FontAwsome）に関する指定のCSS
.sns_circle span{
    position:absolute;
    padding:10px;
    font-size:26px;　←24px
    color:#FFF; /*文字の色 */
}
4] 横幅を430pxに固定して真ん中に表示
ul.circle_group{
    width:300px;
    margin:auto;
    list-style: none;
    padding:0;
}
5] アイコンを表示させるCSS
.hogehoge:after {
    font-family: 'FontAwesome';
    content: "";
    font-weight: none
}
*例）linuxの場合：.hogehogeが.xfce4(linux)として、content: "\f17c"
6] アイコンの色を選択するCSS
.sns_circle.hogehoge{
    background-color: #6CC655;
}

1] 丸型ボタンにするCSS

.sns_circle{

position:relative;

width: 50px;　←40px

height: 50px;

margin:0 5px;

-webkit-border-radius: 50%;　←15%

-moz-border-radius: 50%;　←15%

border-radius: 50%;　←15%

background-color: #999;

float:left;

list-style: none;

}

2] リンク領域をブロック全体にするCSS

.sns_circle a{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

-webkit-border-radius: 50%;　←15%

-moz-border-radius: 50%;　←15%

border-radius: 50%;　←15%

text-indent:-999px;

color:#FFF: /*文字の色 */

}

3] フォント（FontAwsome）に関する指定のCSS

.sns_circle span{

position:absolute;

padding:10px;

font-size:26px;　←24px

color:#FFF; /*文字の色 */

}

4] 横幅を430pxに固定して真ん中に表示

ul.circle_group{

width:300px;

margin:auto;

list-style: none;

padding:0;

}

5] アイコンを表示させるCSS

.hogehoge:after {

font-family: 'FontAwesome';

content: "";

font-weight: none

}

*例）linuxの場合：.hogehogeが.xfce4(linux)として、content: "\f17c"

6] アイコンの色を選択するCSS

.sns_circle.hogehoge{

background-color: #6CC655;

}

## フロントページの指定した場所にソースを作成

# 呼び出しの<i class="icon-hogehoge"></i>を基に。。。

<ul class="circle_group">
  <li class="sns_circle hogehoge"><span class="icon-hogehoge"></span><a href="#" title="#"></a></li>
----省略----
</ul>

# 呼び出しの<i class="icon-hogehoge"></i>を基に。。。

----省略----

</ul>

メニュー用アイコンのCSSソースは「SNSシェアボタン」作成時と同じ、ただ各アイコンがバラバラなので適当に修正。アクセサリー的なものなので自分の好みで「この辺で良いかな？」で終了。参考にしたCSSは「sns-share」、とウエブサイトの「Webllica」のUnicodeリストでコードをピックアップ。
追記：「OSBLOG_OSSHINET」では丸型アイコン

2019年7月30日2019年10月22日

WordPressのリビジョン機能と自動保存機能

1] リビジョン機能は下書きした記事を「下書き保存」すると履歴として残す機能で、何回も下書き保存すると何時の間に10～15と溜まっていることがある。
2] 自動保存機能は編集してる最中の記事を自動保存するので、何時の間に膨大な数になっている。

初めてWordpressでサイトを公開した時から、プラグインの「WP-Optimize」を利用して削除していたので良いけど、プラグインに頼らず独自にこの辺の機能を制限するとか無効にすることを試みた。最終的には両機能を制限して便利な「WP-Optimize」で削除することにした。
1. 「functions.php」に以下のコードを追記（無効）

  function autosave_stop(){
    wp_deregister_script("autosave");
  }
  add_action("wp_print_scripts", "autosave_stop");

function autosave_stop(){

wp_deregister_script("autosave");

}

add_action("wp_print_scripts", "autosave_stop");

2. 「wp-config.php」に追記（制限）

  /* リビジョン数を制限 */
    define('WP_POST_REVISIONS', 3);
  /* 自動保存のインターバル */
    define("AUTOSAVE_INTERVAL", 1800);
  *自動保存の間隔は、デフォルトは60秒
# 上記コードは「wp-settings.php」が読み込まれる前に設定する必要がある。
    require_once(ABSPATH . 'wp-settings.php');

/* リビジョン数を制限 */

define('WP_POST_REVISIONS', 3);

/* 自動保存のインターバル */

define("AUTOSAVE_INTERVAL", 1800);

*自動保存の間隔は、デフォルトは60秒

# 上記コードは「wp-settings.php」が読み込まれる前に設定する必要がある。

require_once(ABSPATH . 'wp-settings.php');

実際に編集した記事を保存前に消してしまった経験がないので、自動保存の機能が役に立っていると言った感覚がない。本来ならば無効にするで良いが、「WP-Optimize」の便利な機能（データの最適化等）が別にもあるので、「Wordpressで制限、WP-Optimizeで削除」することにした。

2019年7月19日2019年10月29日

動画（mp4）に字幕を追加する方法

今まで気が付かなかった機能の一つ、ウィジェット内（フッター）の動画に字幕を入れてみた。

1] UTF-8で拡張子（srt）ファイルを作成

# mousepadでxfce.ja_JP.srtを作って置く
00:00:00,000 --> 00:00:10,000
字幕　←例）Ubuntu18.04LTS ServerをXfce4で操作

# mousepadでxfce.ja_JP.srtを作って置く

00:00:00,000 --> 00:00:10,000

字幕　←例）Ubuntu18.04LTS ServerをXfce4で操作

2] 字幕の追加のメディアアップローダーから、アップロードし追加

# 動画詳細ボタンをクリックして表示
スクロールした一番下の欄のを日本語に替える。
"en"　← "ja_JP"
"English" ← "日本語"

# 動画詳細ボタンをクリックして表示

スクロールした一番下の欄のを日本語に替える。

"en"　← "ja_JP"

"English" ← "日本語"

3] 「更新」→「保存」ボタンをクリックしてサイト（投稿）で確認

# 下のバー[CC]を表示して「日本語」をクリックしてから動画再生

1	# 下のバー[CC]を表示して「日本語」をクリックしてから動画再生

またまた楽しみが増えた。

2019年7月17日2019年10月22日

WordPressのウイジェットに「SNSボタン」をプラグインなしで追加

プラグイン「AddToAny」をインストールして設定したけど、何故かメインページのボタンだけいつの間にか表示されなくなった。ならばプラグインのような自作の「SNS」をメインページに乗せようとサイト巡ぐりで見つけた「SNSボタンをWordPressの記事やウィジェットにプラグインなしで追加する」をベースにしてほんの少しだけ修正・追加して納得（自己満足）の「SNSボタン」を完成させた。

# WordPressテーマ内(子テーマ）にテンプレート作成、CSSに追記、及び、「icomoon」をアップロード
1．FontAwesome公式サイトの「http://fontawesome.io/」、接続不可で別途「icomoon」をダウンロード・解凍。
2．sns.phpを作成
3．style.cssに記述
# WordPressのウィジェット機能でSNSボタンを設置するため、SNS用のウィジェットを作成
1．functions.phpに記述
2．ウイジェット用CSSを記述
# 参考サイト：Plusers

ここまでは、サイトから得た方法で完璧に「SNSアイコン」をページの下部とかサイドバーに表示させることが出来た。次のステップは独自色を出したかったので、部分的に修正・追加をした。
1．sns.phpのGoogle+をLINEに入れ替えた。

<ul><!--LINEボタン-->
 	<li class="line"><a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"> <i class="icon-line"></i> LINE <!--?php if(function_exists('scc_get_share_line')) echo (scc_get_share_line()==0)?'':scc_get_share_line(); ?--> </a></li>
</ul>

</ul>

2．style.cssで四角のボタンを楕円形にした。

.share a{　　←追記（リンク領域をブロック全体に反映させる部分）
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-indent:-999px;
}
 # 円形になる値50%で楕円になった。
*四角：border-radiusの値に0%を指定
*角丸：border-radiusの値に15%を指定

.share a{　　←追記（リンク領域をブロック全体に反映させる部分）

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

text-indent:-999px;

}

# 円形になる値50%で楕円になった。

*四角：border-radiusの値に0%を指定

*角丸：border-radiusの値に15%を指定

3．ボタンにカーソルを合わせた時の表示設定欄へ

.share li a:hover {　←追記（マウスオーバーで上下運動）
     -ms-transform: translateY(4px);
     -webkit-transform: translateY(4px);
     transform: translateY(4px);
     box-shadow: none;
}

.share li a:hover {　←追記（マウスオーバーで上下運動）

-ms-transform: translateY(4px);

-webkit-transform: translateY(4px);

transform: translateY(4px);

box-shadow: none;

}

OSHIVM_SITEのウイジェット専用（フッター）になったけど、SNSボタン追加方法が分かったのでOSBLOG_OSSHINETのサイドバー用のSNSボタンを作成する予定。。。

2019年6月25日2019年10月22日

WordPress5.2.2とphp7.3で致命的なエラーのプラグイン

LAMP Serverパッケージのphp7.2をphp7.3へアップグレードしてからwordpress5.2.2で利用するプラグイン全てを入れて、サイトヘルスで確認すると致命的なエラーのプラグインが一つ、警告程度のプラグインが二つ見つかった。

致命的なエラーのプラグインは、「crayon Syntax Highlighter」で調べてみると既に3年ほど放置されているらしいとの事で、php7.3では幾つかのファイルを修正する必要があるようだ。諦めかけていた時に海外のサイトで見つけた。。。

「Crayon Syntax Highlighterの最新バージョンをダウンロードするには？これは最新のCrayon Syntax Highlighterプラグインをダウンロードするためのリンクです： https : //github.com/Crunchify/crayon-syntax-highlighter/releases」

上記の文章が目に留まり半信半疑でZIPをインストール、今までのCrayonを削除してからインストール。

以前の記事をコピーして...

1	以前の記事をコピーして...

確認したところナナナナんとエラー無し！！！感謝。

これでXubuntu18.04LTDの「OSBLOG_OSSHINET(自宅サーバ)」をphp7.3へアップグレードすることができるので、即アップグレード。

2019年6月23日2019年10月22日

WordPress5.2”ジャコ”のアップデート

このアップデートでは開発者向けサイトや自分のサイトの管理する上で、必要なときに正しい情報を手に入れるための助けになる “Site Health”と言うツールが用意された。ダッシュボードの「ツール → サイトヘルス」でサーバーの設定を確認でき、速度とセキュリティの向上（ヒント）を得ることが出来るようだ。

1] 致命的なエラー保護
Wordpress5.2からプログラムのエラーチェックが入り、リカバリーし易くなった。今まではPHPの記述を間違ったり、プラグインどうしでコンクリフトを起こした場合に画面が真っ白(500エラー)になり直すのに手探り状態だったものが、エラー発生時にメールが管理者に送信され、このメールのリンクをクリックしてリカバリーする事ができるようになった。

2] PHPバージョンのチェック
WordPress5.2からPHPバージョンをチェックしてver5.6.20 以上でないとイントールできなくなった。また、プラグインの方もWordPressの最低バージョンとphpバージョンをチェックしてどちらも満たしていないと有効化できなくなった。

今まで経験したトラブルに対して、”Site Health”があれば少なからず解消できた。将来的にPHP7.3とかバージョンアップが必要になる際には確実に役立ちそう。