カテゴリー: WordPress

wordpress関係です

WordPressの初期設定

こんにちは　かずまなぶ(´・ω・`)です。

前回からオウンドメディア化していこうという企画をやっていますが、今回はオウンドメディアに相応しいWordPressの初期設定をしていきたいと思います。

WordPressの初期設定

  • WordPress アドレス (URL) = https://toyo-interest.com
  • サイトアドレス (URL)            = https://toyo-interest.com
  • そして、エックスサーバーのSSL設定からhttps化する。参考ブログ

https化は３０分くらいかかるので焦らないこと。

  • 設定＞パーマリンク＞カスタム構造

https://toyo-interest.com /%category%/%postname%/

入れておきたいWordPressプラグイン

All in One SEO　でSEO対策

機能管理＞XMLサイトマップとソーシャルメディアをActiveにします。

ソーシャルメディア＞画像設定＞デフォルトのOG imageをアップロードします。

TinyMCE Advanced　で装飾機能を拡張

エクセルみたいに、機能が増えます。

Duplicate Post　で投稿を複製

記事のフォーマットを用意しておいて、新規投稿するときはこのフォーマットを複製（Duplicate）して使用します。

Shortcodes Ultimate　で装飾機能をさらに拡張

色々な装飾をショートコードボタンから追加できるようになり、スマホにも最適化してくれます。

Shortcodes UltimateでYouTubeを貼ってみます。

Table of Contents Plus　で目次を自動生成

”<h2>あああ</h2><h2>いいい</h2><h2>ううう</h2>”　という感じで見出しを入れるだけで、目次を記事の頭に目次を自動生成してくれます。

さらに設定が必要です。Table of Contents Plusの略でTOCと思われますが、

ダッシュボード＞設定＞TOC+　の中の基本設定で

位置＝最初の見出しの前（デフォルト）

表示条件＝４つ以上見出しがあるとき

以下のコンテンツタイプを自動挿入＝post（投稿ページ） のみにチェックを入れます。

一番下の、3.1.1と3.1.2はどうやったら消えるのでしょうか・・・

Fancier Author Box  by ThematoSoup　でプロフィールを設定

設定＞Fancier Author Box  by ThematoSoup
投稿画面で表示する     =  下部
固定ページで表示する =  上部

このとき投稿画面で表示を上部とか上下両方にしてしまった場合、目次の自動生成で下図のように余計な項目0.0.1 と0.0.2ができてしまいますのでご注意ください。

Disable Comments　でコメントを無効化

ワンクリックでスパムメールを一切受付けなくなります。

設定＞Disable Comments > ”どこでも”にチェックを入れます。

WordPressテーマを使ってみる

OPEN_GAGE

テーマは一つ８０００～１００００円するので、ちょっとわたしにはまだ手が出しにくいのです。もうしばらくは、標準テーマで行こうと思います。

オウンドメディア化を考える

こんにちは　かずまなぶ　(´・ω・`)です。
当該ブログを１段レベルアップすべく、オウンドメディアという考え方を取り入れようと思います。

オウンドメディアとは

直訳すると”自分の所有する媒体”ですが、やっていることは、
”顧客に対して自分独自の情報を発信するWebSite”です。

成功者のマネをしよう

”学ぶ”の語源は”真似る”と言われていますから、すでに成功している、出来上がっているモデルを研究することはとても有効な方法だと思います。WebSiteの構成をよくよく眺めて技を盗みましょう。

  • HubSpot
  • LIG
  • FERRET
  • LISKUL
  • バズ部

どういったものを作っていたらよいか、なんとなくイメージが湧いたでしょうか。

 

WordPressもHTMLだから　ちゃんとタグは守ろう(´・ω・`)

こんにちは　圧倒的　かずまなぶ　(´・ω・`)です。

いままで見出し部分は、見やすさで”引用”を使っていました。

でも、それはHTML的には邪道なので、ここからはちゃんとしていこうと思います。

<h2>大見出し１</h2>

下のimageに意味はありません。

基本構造は

  1. <a href=”https://○○”></a>で画像に対してリンクを貼ります。
  2. この<a>タグのパラメータとして target=”_blank”　を追記し、別タブで開くようにします。
  3. その中に<img src=”https://○○.jpg”>で画像を入れます。
  4. 画像タグの内部には画像サイズを指定するwidth=”300″ height=”225″ を入れます。

<a href=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map.jpg”><img class=”aligncenter wp-image-902 size-medium” src=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map-300×225.jpg” alt=”” width=”300″ height=”225″ /></a>

<h3>中見出し１－１ リストの構造</h3>

<p1>ここは段落。文章を書いていく場所</p>

  • <ul><li>ここはun-order-list（順番なしのリスト項目）</li>
  •          <li>ここはun-order-list（順番なしのリスト項目）</li></ul>

<p1>ここはparagraph（段落）。文章を書いていく場所</p>

  1. <ol><li>ここはorder-list（順番ありのリスト項目）</li>
  2.          <li>ここはorder-list（順番ありのリスト項目</li></ol>

<h3>中見出し１－２ 効果的なリンクの貼り方</h3>

２つあるので比較してみましょう。

<h4>中見出し１－２－１ アンカーテキスト</h4>

テキストを書いて、それにリンクを貼ります。

例えば   < グーグル >

 

でもなんか寂しいですね。次回はテーマを変更してみます。

お知らせ：当該webサイトをSSL化しました

こんばんは Kazu_Manabuです。

当該webサイトをSSL化しました。URLの頭がhttpsになっております。

やり方です。

エックスサーバーを使っているのですが、

まず、エックスサーバーにログイン

インフォパネル内の「サーバー管理」

任意のドメイン名の「選択する」を押す

SSL用アドレスに「https://www.toyo-interest.com/」が追加されます。httpsにちゃんとなっています。

１分位すると反映されます。

次に、wordpressにログイン

ダッシュボードの設定＞URLのhttp://～～～をhttps://～～～に書き換えます。というかsを挿入します。

そして、私の場合は２０分くらい放置してやっと繋がるようになりました。

かなりドキドキしました。

二度とつながらないんじゃないかとか、ハラハラしました。

実はわたくし、

ろくに調べず一番最初にwordpressの設定でhttpをhttpsにいじってしまい、繋がらなくなってしまいました。ログインできないのでダッシュボードに入ることができず、元通りにすることができないという事態に陥りました。

調べていくと、エックスサーバーのインフォパネル内の「サーバー管理」でSSL化しなさいと書いてあったのでやってみたら、うまくいきました。

本当に良かったです。(*´﹃｀*)

 

 

 

圧倒的： WordPress にソースコード埋め込む方法

こんにちは　” (‘ω’) かず　まなぶ “です。

今日はwordpressに、ソースコードを埋め込む、ということを学んでいきます。

wordpressのプラグインにCrayon Syntax Highlighter とかSyntaxHighlighter Evolveというプラグインというのがあるのでそれを使うのが一般的らしいのですが、若干言うことを聞かない場合もあり、他の方法としてgistを使ったほうが何かと便利なんじゃないかということをお聞きしましたのでやってみました。

gist　やっていきましょう。

https://github.com/

githubです。アカウントを登録していない方は、ユーザー名　メールアドレス　パスワードを入力して　sign up for GitHubをクリックします。フリープランでOKです。

画面右上のNew gist を押してgist作成画面に行きましょう。

これがGitHubGistの画面です。

Gist descrption　：　このコードの説明を書く　いわゆるタイトル

File name including extension ：拡張子を含んだファイル名を入力します。Python であれば　〇〇.py これでこのコードは Python なんだなと認識してくれます。

indent：字下げ設定です。tabsでなくてspacesにしましょう。スペース数は Pythonなら4にしましょう。

line wrap mode：コードの折り返しです。ノーラップだと折り返しなしでコードが切れてしまいますのでここはソフトラップに切り替えましょう。

Create secret gist または Create public gistををしましょう。どっちでもいいです。

上のボタンをEmbedにするとwordpressに張り付ける用の呪文が出てきます。

今回は

<script src=”https://gist.github.com/keita-lib/ce51a7efdf2211485dd77b61f9994cab.js“></script>

でした。

githubまで読みに行きますよってことですね。そうかぁ　wordpressの外にでるのかぁ。なんかやらしいなあ。

そして、さらに右側の四角いボタンを押すことによってこの呪文をクリップボードにコピーできます。最近こういうコピーボタンが増えてきましたね。とっても便利だと思います。

では WordPress を開いて埋め込んでいきましょう。

埋め込みたいページを開いて編集画面に行ってください 。

画面右上の詳細ボタンを押してエディターをビジュアルエディタから”コードエディタ”に切り替えてください。

ショートカットキーであれば ” CTRL+ SHIFT+ALT+ M キー ” で切り替えることができます。普段から使い慣れておくと便利です。

gistからコピーしてきた呪文を WordPress のコードの中に貼り付けましょう私はしたの場所に貼り付けました。この時に貼り付けた後に勝手に P タグで括られます。

なおかつ、どこに入れたか後で見やすいように<!– wp:embed /–>タグで作ろうと思いましたがなぜか離れた位置にしか設置できませんでした。これは謎です。

結果はこちら

赤い文字、青い文字に色分けされてて綺麗じゃないでしょうか。

右下のview raw を押すとコードだけの画面が現れますのでコピーも簡単に行います。

ダメだった例。

ブロックの追加で埋め込みを行なった場合。

これはダメでした。

URL を入力してくださいと警告がでます。

そりゃそうです。これ URL ではないですから。

以上でした本日も最後まで見てくださいましてありがとうございました。(‘ω’)かず　まなぶ

次回は WordPress のプラグイン　クレヨンを使ってみてどっちがいいのか比較してみようと思います。