新しいフォームボタンを追加するために、テーマフォルダーのtemplate.themeファイルで hook_form_FORM_ID_alter を使用しました(通知:ThemeNameを次のコードのテーマの名前に置き換えます)。
ThemeName.theme:
_**
* Replace the Search Submit Button with a Font Awesome Character.
*/
function ThemeName_form_search_block_form_alter(&$form, &$form_state) {
$form['keys']['#attributes']['placeholder'][] = t('Search');
$form['actions']['submit']['#value'] = html_entity_decode('');
$form['actions']['submit']['#attributes']['class'][] = 'search-button';
}
_
注意:Unicodeコードを解析するには、html_entity_decode()
を使用します。
およびCSS:
_.search-button input[type="submit"]{
font-family: FontAwesome;
color: #fff !important;
display: inline;
font-size: 18px;
}
_
ラベルをプレースホルダーテキストに変換するには、Drupalのカスタムテーマでhook_form_alter
を使用する必要があります。検索ボックスのフォームIDはseach_block_form
であるため、次のコードを使用してこれを実行できます。
/**
* Implements hook_form_alter().
*/
function hook_form_search_block_form_alter(&$form, &$form_state) {
$form['keys']['#attributes']['placeholder'][] = t('Search');
}
検索ボタンのルックアンドフィールを変更するには、CSSを使用するだけです。通常は、背景をアイコンに設定し、text-indentを使用してテキストを非表示にします。
Font-awesomeアイコンを追加する前処理関数で次のことを行いました。検索ボタンを識別するのはラベルだけなので、検索入力では少し難しいです。次に、要素をCSSのセレクタ.button--text
で非表示にします。
function MYTHEME_preprocess_input(&$variables) {
$element = &$variables['element'];
// Ugh :(
if ($element['#type'] === 'submit' && $element['#value']->__toString() === 'Search') {
$variables['children'] = $element['#children'];
$variables['children'][] = [
'#theme' => 'html_tag',
'#tag' => 'i',
'#attributes' => ['class' => ['fa', 'fa-search']],
];
}
}
Drupal 8/FontAwesome 5の手順
YOUR_THEME_NAME_HERE.THEMEファイルを作成し、テーマディレクトリに配置します(例:your_site_name/themes/your_theme_name)
これをファイルに貼り付けます。PHP検索ブロックを検索し、値をFontAwesomeアイコンのUNICODEに変更するコードです。他の文字はこのリンクで検索できます https: //fontawesome.com/cheatsheet 。
<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
$form['keys']['#attributes']['placeholder'][] = t('Search');
$form['actions']['submit']['#value'] = html_entity_decode('');
}
?>
テーマのCSSファイル(つまり、your_site_name/themes/your_theme_name/css/styles.css)を開いて貼り付け、すべての入力送信テキストをFontAwesomeに変更します。入力ボタンにもテキストを追加したい場合、これが機能するかどうかはわかりませんが、アイコンだけの場合は問題ありません。
FontAwesomeをインポートしていることを確認し、CSSファイルの先頭に追加します
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
次に、これをCSSに追加します
input#edit-submit {
font-family: 'Font Awesome\ 5 Free';
background-color: transparent;
border: 0;
}
すべてのキャッシュをフラッシュし、細かく作業する必要があります
Googleフォント効果を追加
Google Web Fontsも使用している場合は、アイコンに効果を追加することもできます(詳細はこちら https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta )。 CSSで最初に使用したい効果を含むGoogle Web Fontをインポートする必要があるので、
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800&effect=3d-float');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
次に、.THEMEファイルに戻り、3Dフロート効果のクラスを追加して、コードが入力にクラスを追加するようにします。利用可能なさまざまな効果があります。したがって、好みの効果を選択し、フォントインポートのCSSを変更し、以下のコードの値FONT-EFFECT-3D-FLOATをfont-effect-WHATEVER_EFFECT_HEREに変更します。効果はまだベータ版ではなく、すべてのブラウザーで機能しないため、試す前にこちらをお読みください https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta
<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
$form['keys']['#attributes']['placeholder'][] = t('Search');
$form['actions']['submit']['#value'] = html_entity_decode('');
$form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>
Drupal 8/FontAwesome 5の場合(上記の他の同様のソリューションは機能しませんでした)
fontawesome モジュールがすでにインストールされている場合は、THEMENAME.theme
ファイルに追加できます
use Drupal\Component\Render\FormattableMarkup;
function THEMENAME_form_search_block_form_alter(&$form, &$form_state) {
$form['keys']['#attributes']['placeholder'][] = t('Search');
$value = new FormattableMarkup('<i class="fas fa-search"></i>@text', ['@text' => '',]);
$form['actions']['submit']['#value'] = $value;
}
Yourthemeディレクトリのyourtheme.themeファイルを変更する必要があります。以下は、送信ボタンのテキストを変更します。
function yourtheme_form_search_block_form_alter(&$form, &$form_state) {
$form['actions']['submit']['#value'] = t('Zoeken');
}
Boostrapサブテーマとdrupal=を使用すると、すべてのボタンの設定テーマでグリフィコンを削除できますが、TEMPLATE.themeのこのフックで特定のボタンのグリフィコンを削除できます https:// drupal-bootstrap.org/api/bootstrap/bootstrap.api.php/function/hook_bootstrap_iconize_text_alter/7
function YOURTEMPLATENAME_bootstrap_iconize_text_alter(array &$texts) {
// use ksm($form) OR other dump($form) functions
if($texts['contains']['YOURTEXT']) {
unset($texts['contains']['YOURTEXT']);
}
}
ボタンのタイトルを表示したい場合は、bootstrap/src/Plugin/Form/SearchForm.phpファイルをサブテーマにコピーする必要があります
YOURSUBTHEME/src/Plugin/Form/SearchForm.phpファイルのコンテンツをコピーしてファイルに貼り付け、コンテンツを次のように編集します。
<?php
...
use Drupal\bootstrap\Plugin\Form\FormBase;
...
public function alterFormElement(Element $form, FormStateInterface $form_state, $form_id = NULL) {
$form->advanced->setProperty('collapsible', TRUE);
$form->advanced->setProperty('collapsed', TRUE);
$form->basic->removeClass('container-inline');
$form->basic->submit->setProperty('icon_only', FALSE);
$form->basic->keys->setProperty('input_group_button', TRUE);
}
}
これを使用すると、「検索」というテキストのみが表示され、検索ボタンにはグリフィコンが表示されません。
キャッシュをフラッシュすることを忘れないでください!