WordPress Twentyseventeen 子テーマにGoogle Adsenseを差し込む

adsenseを出力するphpを作る

single.phpを子テーマに持ってくる

single.phpを編集する

※24行目の空白に「get_template_part( ‘template-parts/post/adsense’, get_post_format() );」を追加する


dockerでalpineなwodpress環境を作ってみた

軽量コンテナalpineベースでWordPressを動かすまで

ローカルにコンテンツを置く場所を確保する

実行コマンドを作っておく

linkはもう使われなくなってて、nameで指定した文字がコンテナ内でユニークなホスト名として名前解決してくれて通信できるようになる。但し、コンテナ同士が通信できるようにプライベートなネットワークを作っておく必要がある。

プライベートなネットワークをmynetworkとする。

データベースはmysqlを使う。何度も起動し直すことも想定してお掃除するスクリプトを入れちゃってますが、恒久的に残したい場合はrm と chownは削除しておいてください。

最後にワードプレスのコンテナ。wordpressが入ってなかったりします。。。

作ったshellを実行します。まずnet.shを最初に実行します。そうすることで、コンテナ間の通信ができるようになります。

起動したら、wordpressのコンテナに入って、DB設定をします。

早速ここで、別のコンテナmysqlへrootで接続します。パスワードは環境変数で定義したMYSQL_ROOT_PASSWORD=の値を入力します。

mysqlに接続できたら、wordpress用のデータベースを作成して、そのDBへwordpressコンテナのwordpressアカウントから接続できるようにします。

作ったDBへwordpress用アカウントで接続できるか確認します。

ブラウザでアクセスすると、Wordpressの初期設定画面が出てきます。


Bootstrapのグリッドシステム

Bootstrapのグリッドシステム

グリッドシステムとは、サイトの割る付けの構成を横12ブロック単位で分割できるように考えられたもので、クラスを col-xs-3 のように指定すると分割できます。

例えば、

と、書くと、

1 2 3 1 2 3 4 5 6 7 8 9

col-xs-3で左から3ブロック分と、次のDIVで9ブロック分とるけど、offsetで、スタート位置を左から3ブロックずらしてから9ブロック使いますとなります。

containerで割り付ける領域を指定。rowで行を指定(横に並んだり、ブレークして縦に引っ付いたりする単位)。
containerは固定幅指定で、container-fruidは流動的に変化する。

xsの部分は、作っているWEBサイトがどのような画面サイズの端末からアクセスされることを期待するのかによって以下のように選択します。

モバイル(768p未満) タブレット(768px以上、992px未満) デスクトップ(992px以上、1200px未満) デスクトップ大画面(1200px以上)
class名接頭辞 .col-xs- .col-sm- .col-md- .col-lg-
横幅ブレークポイント なし(auto) 750px 970px 1170px

ここに、色々なパターンが紹介されているので、サイト構成をアレンジしてみてね。

http://bootstrap3-guide.com/base/grid.html
http://getbootstrap.com/examples/grid/


ネットワーク図を自動で綺麗に書きたい

ネットワーク図を自動で綺麗に書きたい

ネットワーク図をVisioやExcelで書くのは大変。
文書の管理も大変。運用管理ツールなどですでに接続状態はもってるのになぁ・・・といった時に朗報です。

vis.jsという素晴らしいツールがあります!

vis.jsを使えば、JSONデータでホスト(node)と、その接続(edge)を渡すだけで綺麗に自動でホストを配置してネットワークを書いてくれるのです。

以下サンプルです。オプションでかなり色々なカスタマイズが可能です。とりあえずぷよぷよするのをなくしたければ、optionsのphysicsのenabledをfalseにすると動かした位置に止まるようになります。nodeにx,yの座標を入れれば固定位置に置くこともできるので、CoreL3などは固定してしまってもよいかもしれませんね。



jetpack MarkDownを試してみる

markdown記法はこちら

Markdown quick reference

見出し

階層2

階層3

階層4

引用

引用

リンク

今日という日は贈り物

数字付きリスト

  1. リスト1
    1. リスト1-1
    2. リスト1-1-1
  2. リスト2
  3. リスト3

番号無しリスト

  • リスト
    • リスト
  • リスト
    • リスト
  • リスト
    • リスト

ソースを表示

This is code

項1 内容1 内容2
項目 内容 内容