알려주신 코드는 잘되네요.

찬찬히 뜯어보니 순서 등도 매우 중요하네요.

다만 입력창의 높이를 더 낮추는 것은 작동하지는않네요.

암무튼 감사합니다.  여기까지로 만족하기로 했습니다. 

실제 검색 기능이 동작하지 않는다는 말씀이신지요?

input 태그만으로는 검색 기능이 동작하지 않습니다.

올려주신 코드 중 아래의 코드를

echo '<div class="clr custom_search" id="custom_search_id"><div class="flexbox"><div class="search"><div><input type="text" placeholder=" Search . . ." required> </div> </div></div></div>';

아래의 코드로 교체해보시겠어요?

echo '<div class="clr custom_search" id="custom_search_id"><div class="flexbox"><div class="search"><div><form method="get" action="'.site_url().'"><input type="text" placeholder=" Search . . ." name="s" required></form></div></div></div></div>';

CSS 코드도 아래의 코드로 교체해보시겠어요?

/* 검색창 */
.flexbox {
	background: linear-gradient(155deg, #55c7ed, #2bb3e0, #3bc1ed);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search {
	margin: 10px;
}

.search > h3 {
	font-weight: normal;
}

.search > h1,
.search > h3 {
	color: white;
	margin-bottom: 5px;
	text-shadow: 0 1px #0091c2;
}

.search > div {
	display: inline-block;
	position: relative;
}

.search > div:after {
	content: "";
	background: white;
	width: 2px;         /* 돋보기 손잡이 두께 */
	height: 20px;       /* 돋보기 손잡이 길이 & 위치 */
	position: absolute;
	top: 10px;          /* 돋보기 손잡이 두께 */
	right: 10px;
	transform: rotate(140deg);  /* 돋보기 손잡이 각도 */
	box-shadow: 1px 0 #0091c2;
}

.search > div > form input {
	color: white;
	font-size: 13px;
	background: transparent;
	width: 20px;    /* 돋보기 폭과 높이 */
	height: 20px;
	padding: 5px;
	border: solid 1px white;
	outline: none;
	border-radius: 35px;
	box-shadow: 0 1px #0091c2;
	transition: width 0.5s;
}

.search > div > form input::placeholder {
	color: #efefef;
	opacity: 1;
}

.search > div > form input::-ms-placeholder {
	color: #efefef;
}

.search > div > form input::-ms-input-placeholder {
	color: #efefef;
}

.search > div > form input:focus,
.search > div > form input:valid {
	width: 150px;
}

고맙습니다.

아래와 같은 코드를 적용했는데요.

작동하지 않던데  무엇이 잘못되었을까요?

add_action('ocean_after_logo_inner', 'puripia_add_search_icon');

function puripia_add_search_icon() {

if(wp_is_mobile() == true){

echo '<div class="clr custom_search" id="custom_search_id"><div class="flexbox"><div class="search"><div><input type="text" placeholder=" Search . . ." required> </div> </div></div></div>';

} }

그리고 https://codepen.io/takaneichinose/pen/gKVXXL?editors=1111와 같이 css를 이용한 입력폼을 만들 시 검색 이 작동하지 않는데요. 여기서 뭐가 더 추가되어야할까요?

저는 위 링크에서 제안하는 것과 유사하게 아래 코드를 적용했습니다.

 /* 검색창 */
  .flexbox {
    background: linear-gradient(155deg, #55c7ed, #2bb3e0, #3bc1ed);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .search {
    margin: 10px;
  }
  
  .search > h3 {
    font-weight: normal;
  }
  
  .search > h1,
  .search > h3 {
    color: white;
    margin-bottom: 5px;
    text-shadow: 0 1px #0091c2;
  }
  
  .search > div {
    display: inline-block;
    position: relative;
  }
  
  .search > div:after {
    content: "";
    background: white;
    width: 2px;         /* 돋보기 손잡이 두께 */
    height: 20px;       /* 돋보기 손잡이 길이 & 위치 */
    position: absolute;
    top: 10px;          /* 돋보기 손잡이 두께 */
    right: 10px;
    transform: rotate(140deg);  /* 돋보기 손잡이 각도 */
    box-shadow: 1px 0 #0091c2;
  }
  
  .search > div > input {
    color: white;
    font-size: 13px;
    background: transparent;
    width: 20px;    /* 돋보기 폭과 높이 */
    height: 20px;
    padding: 5px;
    border: solid 1px white;
    outline: none;
    border-radius: 35px;
    box-shadow: 0 1px #0091c2;
    transition: width 0.5s;
  }
  
  .search > div > input::placeholder {
    color: #efefef;
    opacity: 1;
  }
  
  .search > div > input::-ms-placeholder {
    color: #efefef;
  }
  
  .search > div > input::-ms-input-placeholder {
    color: #efefef;
  }
  
  .search > div > input:focus,
  .search > div > input:valid {
    width: 150px;
  }

염치없지만 밤색 고민해 보았는데요  답을 못찾아서 여쭈어 봅니다.

적용한 사이트는 https://puripia.com 입니다.

감사합니다.

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가해서 확인해보시겠어요?

@media screen and (max-width: 600px) {
	li.search { display: none; }
}

추가로, PHP 코드로 모바일인지 체크하시려면 워드프레스의 wp_is_mobile 함수를 사용해보시겠어요?

예제는 아래와 같습니다.

<?php
if(wp_is_mobile() == false){
     /* 모바일이 아닐 경우 실행됩니다. */
}
?>

<?php
if(wp_is_mobile() == true){
     /* 모바일 접속일 경우 실행됩니다. */
}
?>

자세한 설명은 아래 링크를 참고해보세요.

https://codex.wordpress.org/Function_Reference/wp_is_mobile

고맙습니다.

원하는 대로 작동은 됩니다.

다만 여기서 모바일에서만 작동하도록 만드려면 어떻게 해야 할까요?

css에서는 관련 코드가 많은 것 같은데요. php에서는 못 본 것 같습니다.

고맙습니다.

아래의 코드를 활용해보시겠어요?

echo '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="puripiasearchicon">'.get_search_form(false).'</div></li>
<script>
jQuery(document).ready(function(){
	jQuery(".search_icon").click(function(){
		jQuery("li.search div").show();
	});
});
</script>';

만약, 위의 코드가 원하시는 방향이 아니라면

imgur에 이미지를 업로드한 뒤 링크 걸어주시겠어요?

고맙습니다.

제가 설명을 정확하게 하지 않은 것 같습니다.

제가 하려는 것은 검색 아이콘만 나오고 (검색 박스안에 검색 아니콘이 있는 것이 아닌)

이 검색 아이콘을 누르면 검색할 수 있도록 구현하고 싶습니다.

그리고 모바일에서 검색 아이콘이 보여야하기 때문에 햄버거 메뉴 밖에 검색 아이콘이 위치해야 하구요.

(기존 대부분 방식은 메뉴안에 검색 아이콘을 추가하기 때문에 모바일에서는 햄버거 메뉴을 눌러야 검색 아이콘과 검색 박스를 발견할 수 있어서 불편합니다)

주절주절 설명했는데 의도가 정확히 설명되었는지 모르겠습니다. 

갈수록 쉽지는 않네요

감사합니다. 

검색 아이콘 앞에 점(.)이 표시된다면

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가해보시겠어요?

li.search { list-style: none; }

단순히 검색 아이콘을 추가하고 링크를 이동하게 하시려는 지요?

get_search_form 쪽을 안 보이게 하신 이유는 무엇인지요?

페이지 이동을 하게 하시려면

올려주신 코드 중 아래의 코드를

<a class="search_icon">

아래의 코드로 교체해보시겠어요?

<a href="페이지주소" class="search_icon">

위의 코드에서 페이지주소 부분에는 실제 이동할 페이지 주소로 적용해보세요.

올려주신 내용만으로는 어떻게 하시려는지 이해가 잘 되지 않습니다.

어떤 상황인지도 설명해주시겠어요?

고맙습니다.