WordPressのメニューを表示する際、wp_nav_menuメソッドを使って表示することがあると思います。
その際の例

wp_nav_menu( array( 'menu' => 'GlobalMenu', 'menu_id' => 'global_navi', 'container_class' => 'global_navigation' ) );

wp_nav_menuではidやクラス等、ある程度はパラメータを与えることでカスタマイズ出来るようになっています。
しかし、例えばメニューアイテムの最後に任意のアイテムを追加で表示させたいなど、柔軟なカスタマイズをすることが出来ません。

そんな柔軟なカスタマイズを行いたいときの手法をご紹介します。

順に解説していきますが、実際には一連の処理をfunctions.phpにカスタムメソッドとして作成し、メニューを表示したい任意の箇所で実行してください。

解説

メニュー名を指定し、wp_get_nav_menu_objectメソッドでメニュー情報を取得します。
※メニュー名は[外観]->[メニュー]->[メニュー構造]で設定しているメニュー名を指定してください。

// メニュー名
$menu_name = 'GlobalMenu';
// メニュー情報取得
$menu = wp_get_nav_menu_object($menu_name);

取得したメニュー情報を基にメニューアイテムを取得します。

// メニューアイテム取得
$menu_items = wp_get_nav_menu_items($menu->term_id);

取得したメニューアイテムの情報にCSSクラスの情報がありますが、この段階では[外観]->[メニュー]->[メニュー構造]の各項目で設定したCSS class(オプション)で指定したクラスしか設定されていません。
wp_nav_menuでメニューを表示したときはWordPressが自動的に設定してくれているクラスが含まれています。
そのクラスも含めて設定して欲しいときは_wp_menu_item_classes_by_contextメソッドを実行し、本来wp_nav_menuでなら適用されるクラスを反映させます。
但し、このメソッドは公式ガイドにはプライベートだと書かれておりテーマ開発者の実行を想定していないそうなので、今後使えなくなったりする可能性はあります。

// 自動で割り当てられるWP独自クラスを反映させる
_wp_menu_item_classes_by_context($menu_items);

続いてdiv等でラッピングしつつ、リストを作成していきます。

echo '<div class="global_navigation">';
echo '<ul id="global_navi" class="menu">';

又、先ほど実行した_wp_menu_item_classes_by_contextだけではmenu-item-メニューIDクラスが追加されていないので、こちらは手動で追加します。

// クラス用配列
$current_classes = [];

ループでメニューアイテムを取り出していきます。

foreach ( (array) $menu_items as $key => $menu_item ) {

    // クラス用配列にmenu-item-メニューIDを追加
    $current_classes = array_merge($menu_item->classes, ['menu-item-'.$menu_item->ID]);

    echo '<li class="' . implode(' ', $current_classes) . '">';
    echo '<a href="' . $menu_item->url . '"' . (($menu_item->current) ? ' aria-current="page"' : '') . '>' . $menu_item->title . '</a>';
    echo '</li>';
}

ループでメニューアイテムの取り出しが一通り終わったところで、追加アイテムを書き出します。

echo '<li>追加メニューアイテム</li>';

最後にHTMLタグを閉じます。

echo '</ul>';
echo '</div>';

以上でカスタマイズしたメニューを表示することが出来ます。

wp_get_nav_menu_object() – Function | Developer.WordPress.org
_wp_menu_item_classes_by_context() – Function | Developer.WordPress.org

コンテンツをテキストは左揃えで中央寄せしたいとき、これまでラッパーとしてdiv等で囲み、flexを使ったり、幅を決めてmargin: 0 auto;を使ったりしていました。
しかし、もう少し簡単にできる方法があったのでご紹介します。

これまでのやり方例

<div>
    <ul>
        <li>Sea sit et duo</li>
        <li>Labore velit enim gubergren</li>
        <li>Duo kasd amet clita</li>
        <li>Eirmod takimata est possim</li>
        <li>Nobis sed sed justo</li>
        <li>Clita sit erat iriure</li>
    </ul>
</div>

ラッピングしたdivにflexを設定

div {
    display: flex;
    justify-content: center;
}

gridでも同じようなレイアウトにできます。

div {
    display: grid;
    justify-content: center;
}

div等でラッピングせずにやる方法

<ul>
    <li>Sea sit et duo</li>
    <li>Labore velit enim gubergren</li>
    <li>Duo kasd amet clita</li>
    <li>Eirmod takimata est possim</li>
    <li>Nobis sed sed justo</li>
    <li>Clita sit erat iriure</li>
</ul>

ulをコンテンツの幅で表示するようにし、中央寄せにする

ul {
    max-inline-size: max-content;
    margin-inline: auto;
}

表示結果

IE以外のブラウザは対応しているようなので問題なく使用できると思います。

justify-content – CSS: カスケーディングスタイルシート | MDN

上下左右中央揃え

上下左右共に中央揃えしたいときはplace-contentを使います。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
div {
    display: grid;
    place-content: center;
    height: 100%;
}

表示結果

place-content – CSS: カスケーディングスタイルシート | MDN

テキストエリアの先頭や末尾に文字を追加するのは簡単ですが、途中（カーソル位置）に挿入するにはひと手間必要です。

例として適当なフォームを作成します。

<form name="myForm">
    <textarea name="myTextarea"></textarea>
    <input type="submit" value="送信">
</form>

次に以下のようなボタンを作ります。

<button onclick="addText();">文字追加</button>

ボタンを押したときに実行されるJavaScriptが以下のようになります。

function addText()
{
    var textarea = document.myForm.myTextarea;
    var pos      = textarea.selectionStart;

    var before   = textarea.value.substr(0, pos);
    var after    = textarea.value.substr(pos);

    textarea.value = before + "追加する文字列" + after;
}

iOS 12.3.1のSafariでは、デフォルトでセンサーの値が取得できなくなったようです。

window.addEventListener("deviceorientation", function(event){}, true);

上記イベントがキャッチできません。

iOS 12.1では動作することを実機で確認しました。

対応策としては[設定]-[Safari]-[モーションと画面の向きのアクセス]をONにすると
キャッチできるようになりますが、一般ユーザーにこの設定を変えてもらうわけにはいきませんよね；
他に何か有用な情報を発見したら追記したいと思います。

ブログ記事等に設置しておきたいSNSのボタンを綺麗に並べる方法

ボタンはulタグでli内に設置します。
そしてinline-blockで表示し、縦位置を上にすればOK。

.social_buttons{
    text-align: left;
}
 
.social_buttons > li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
 
.social_buttons > li:first-child {
    margin-left: 0;
}
 
.social_buttons > li:last-child {
    margin-right: 0;
}
 
.social_buttons iframe {
    margin: 0 !important;
}
 
@media screen and (max-width: 780px){
    .social_buttons > li{
        width: 80px !important;
        margin: 0 7px 10px 0;
    }
}