WordPress Tips

WordPress
2020.03.25

WordPressの記事

WordPressインストール後の設定箇所

  1. WordPressを最新バージョンに更新する。
    WordPressの現在のバージョンは、ダッシュボードの概要欄で確認できる。
  2. プラグインを最新バージョンに更新する。
  3. テーマを最新バージョンに更新する。
  4. ユーザーの表示名を変更する。
    ユーザー/あなたのプロフィール – ニックネーム & ブログ上の表示名
  5. コメント投稿は許可しない。
    設定/ディスカッション – デフォルトの投稿設定/新しい投稿へのコメントを許可: OFF
    ※ すでに投稿している場合は、個別に投稿を修正する。
  6. テーマを変更する。
    cocoon-master, cocoon-child-master
    ※ ファイルサイズが大き過ぎる場合は、.htaccessまたは、php.iniを修正する。
  7. プラグインを追加する。
  8. プロフィールをサイドバーに追加する。
    外観/ウィジェット – テキスト/サイドバー
    表示設定/チェック・入力したページで表示 – ページ/トップページのみ

追加するプラグイン

PHP Warning: POST Content-Length of XXXXX bytes exceeds the limit of XXXXX bytes が出たら

(https://www.tomiryu.com/wordpress/php-warning-post-content-length/)

  • 以下の３つのPHPパラメータが関係しているので、エラーログが示すbytesより大きめの値を設定すれば解決できる。
php.ini　に設定する場合の例）

memory_limit = 256M
upload_max_filesize = 32M
post_max_size = 32M

php.iniを変更したら、Apacheを再起動する
.htaccess に設定する場合の例）

php_value memory_limit 256M
php_value upload_max_filesize 30M
php_value post_max_size 30M

モバイルアプリのリンク付きボタンの貼り方

【AppStore】アプリのリンク付きボタンの貼り方

(https://xn--0lr83iiqap2g6q3c.jp/blog/appstorelink/)
(https://def-4.com/howto-app-link/)

  1. iTune Link Markerにアクセス
  2. ストア国を選択
  3. メディアタイプを選択
  4. リンクを貼りたいアプリを検索
  5. リンクを貼りたいアプリを選択
  6. 埋め込みコードをコピー＆ペースト
  7. WordPressの自動整形機能により自動消去されてしまうので、</a>の前に「&nbsp;​​​」を追加する
  8. widthとheightの部分は、下記のように変えた方がいいかも
    width:135px; height:40px; margin:16px; background-size:contain;
    (【AppStore】アプリのリンク付きボタンと【GooglePlay】アプリのリンク付きボタンを横に並べる場合は不要)

※ Windows上でも動作確認が可能。

【GooglePlay】アプリのリンク付きボタンの作り方

(https://xn--0lr83iiqap2g6q3c.jp/blog/googleplaylink/)

  1. GooglePlayストアで紹介したいアプリのURLを取得
  2. Google Play Badgesにアクセス
  3. バッジ作成ツールメニューで、言語、作成形式、ファイル形式を選択
  4. PlayストアURLに、1で取得したアプリのURLを貼り付け
  5. 表示されたHTMLをコピー
  6. サイズが大き過ぎるので、小さくする (altの後にwidth=”155″を追加する)

【AppStore】アプリのリンク付きボタンと【GooglePlay】アプリのリンク付きボタンを横に並べる

<div style="clear: left; position: relative; margin: 0px; padding: 0px;">
  <span style="float: left; margin: 10px 0px 0px 0px; padding: 0px;">
    <【AppStore】アプリのリンク付きボタン>
  </span>
  <span style="position: absolute; top: 0px; margin: 0px; padding: 0px;">
    <【GooglePlay】アプリのリンク付きボタン>
  </span>
</div>

ショートコード集

(functions.phpに追加する)

  • PHPの読み込み
function my_php_Include($params = array()){
    extract(shortcode_atts(array('file' => 'default'), $params));
    ob_start();
    include(STYLESHEETPATH . "/$file.php");
    return ob_get_clean();
}
add_shortcode('call_php', 'my_php_Include');

呼び出し例）[call_php file=’scripts’]

  • パーマリンク取得
function fetch_permalink($atts){
    extract( shortcode_atts(array(
        'type'     => 'page',
        'slug'     => '',
    ), $atts));
    if($type == 'page'){
        $link = get_permalink(get_page_by_path($slug));
    }elseif($type == 'cat'){
        $catObj = get_category_by_slug($slug);
        $link = get_category_link($catObj->term_id);
    }elseif($type == 'post'){
        $link = get_permalink(get_page_by_path($slug, OBJECT, 'post'));
    }

    $parse_url_arr = parse_url($link);
    $link = $parse_url_arr['path'];

    return $link;
}
add_shortcode('permalink', 'fetch_permalink');

呼び出し例）[permalink type=’post’ slug=’mailtool’]

PHP Tips

URLのパース

(http://www.560designs.com/memo/734.html)

  • ソースサンプル
$url = 'http://localhost:8080/wp/wp-content/themes/cocoon-child-master/jscommon.js';
$parse_url_arr = parse_url($url);
var_dump($parse_url_arr);
  • 実行結果
array(4) {
  ["scheme"]=>
  string(4) "http"
  ["host"]=>
  string(9) "localhost"
  ["port"]=>
  int(8080)
  ["path"]=>
  string(53) "/wp/wp-content/themes/cocoon-child-master/jscommon.js"
}

※ HTMLの特殊文字は、「htmlspecialchars」で変換する。
※ さらにparse_strでqueryをパースする。

各種ディレクトリ取得

  • スタイルシートのディレクトリ (URI形式)
    get_stylesheet_directory_uri()
    例）http://localhost/wp/wp-content/themes/cocoon-child-master
  • スタイルシートのディレクトリ (ファイルパス形式)
    STYLESHEETPATH
    例）C:\xampp\htdocs\wp/wp-content/themes/cocoon-child-master

Web サービスを連携して自動化させるサービス

IFTTT と Microsoft Power Automate (旧Microsoft Flow) と Zapier

Microsoft Power Automate (旧Microsoft Flow)
https://flow.microsoft.com/ja-jp/

RPA（Robotic Process Automation）

画像サイズ一括変更

【画像一括変換】XnConvertが便利すぎる

(https://2020career.work/%E3%82%A2%E3%83%97%E3%83%AA/%E4%BE%BF%E5%88%A9%E3%83%84%E3%83%BC%E3%83%AB/%E3%80%90%E7%94%BB%E5%83%8F%E4%B8%80%E6%8B%AC%E5%A4%89%E6%8F%9B%E3%80%91XnConvert%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%99%E3%81%8E%E3%82%8B/)

パンダが画像を圧縮？画像圧縮ツール「TinyPNG」の使い方と安全性！

(https://aprico-media.com/posts/2446)

Google AdSense

フリー素材サイト

Markdown Tips

Markdown対応テキストエディタ

Chrome 拡張機能

  • Markdown Preview Plus
    テーマ(CSS)をカスタマイズできる。

WordPressの投稿部分のCSS

.article h2 {
	font-size: 24px;
	padding: 25px;
	background-color: #ffffff;
	border-radius: 2px;
}

.entry-content h2 {
    color: white;
    background-color: rgb(182, 170, 11);
    border: 1px solid rgb(182, 170, 11);
    border-left: 20px solid rgb(182, 170, 11);
    padding-top: .3em;
    padding-bottom: .3em;
    padding-left: .3em;
}
.entry-content h3 {
    border-bottom: 1px solid rgb(182, 170, 11);
    border-left: 10px solid rgb(182, 170, 11);
    padding-top: .3em;
    padding-bottom: .3em;
    padding-left: .3em;
}
.entry-content h4 {
    border-bottom: 1px solid rgb(182, 170, 11);
    padding-top: .1em;
    padding-bottom: .1em;
    padding-left: .1em;
}
.entry-content strong {
    color: #4876f1;
}
タイトルとURLをコピーしました