3

我正在开发由另一位开发人员创建的 WordPress 网站，并且由于 WordPress 更新，自定义主题在某些地方已经损坏。我已经设法解决了大多数问题，但这个问题让我很困惑，主要是因为我不确定它最初是如何工作的！我对 PHP 和 WordPress 还很陌生，我的大部分经验都是在 HTML/CSS 中......无论如何，我已经不得不修改这段代码来解决一些问题，它在现场网站上的当前状态是：

<div class="full rounded-corners" >
    <!-- first image is viewable to start -->
    <?php echo the_post_thumbnail(); ?> 
</div>
<div class="previews">
<?php
global $wpdb;
$attachment_ids = $product->get_gallery_attachment_ids();

foreach ($attachment_ids as $attachment_id) {
    $sql = "SELECT guid FROM wp_1posts WHERE ID = " . $attachment_id;
    $row = $wpdb->get_row($sql);
    ?>
    <a data-full="<?php echo $row->guid; ?>"><img src="<?php echo $row->guid; ?>" width="56" height="58" /></a>

<?php } ?>

有一个主产品图像和一些缩略图，单击缩略图会更改主产品图像。

有几个问题。

  1. WordPress 中使用 srcset 的新响应式图像功能破坏了单击拇指时主图像更改的功能，它继续显示主图像。检查结果时，我可以看到 img src 正在按预期更改，但 srcset 继续显示原始内容。如果禁用响应式图像，它可以工作。
  2. 此代码提取导致加载问题的图像的最大版本。

我试图通过将 更改为<?php echo $row->guid;?>来解决第二个问题<?php echo wp_get_attachment_image($attachment_id, 'thumbnail');?>。这会按预期加载拇指，所以我认为这是一个可行的解决方案，但这给我留下了主图像没有改变的问题（除非禁用响应图像）。

所以在我试图找到解决方案的本地机器上，它现在看起来像这样：

<div class="full rounded-corners" >
    <!-- first image is viewable to start -->
    <?php echo the_post_thumbnail(); ?> 
</div>
<div class="previews">
    <?php
    global $product;
    $attachment_ids = $product->get_gallery_attachment_ids();
    foreach( $attachment_ids as $attachment_id ) {
   ?>
       <a data-full="<?php echo wp_get_attachment_url( $attachment_id ); ?>"> <img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" style="height:60px; width:auto;"></a>
   <?php }
   ?>
</div>
</div>

问题是，我不确定原始代码是如何导致主图像发生变化的，所以我不确定如何修复它。例如<a data-full=……在做什么？？编辑：认为我发现数据完整更改了带有“完整”类的主图片，对吗？

有人可以向我解释单击缩略图时原始代码如何更改主图像，如果可能的话，有任何关于如何解决 srcset 问题的提示吗？

单击拇指后检查主图像时：

<img style="display: inline;" src="http://localhost/MooreRiverWP/wordpress/wp-content/uploads/2015/07/View-to-Ocean.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="8 Harris Street" srcset="http://localhost/MooreRiverWP/wordpress/wp-content/uploads/2015/07/8-Harris-Street-200x133.jpeg 200w, http://localhost/MooreRiverWP/wordpress/wp-content/uploads/2015/07/8-Harris-Street.jpeg 314w" sizes="(max-width: 314px) 100vw, 314px" height="209" width="314">

src 正确，srcset 不正确，图片显示的是 srcset 版本。

编辑： 我现在在实时站点上有几乎可以工作的代码，但禁用了响应式图像。我想让响应式图像正常工作，但除非有人能提供帮助，否则我想我将不得不承认失败并就此罢手！

如何在表情符号键盘和软键盘之间进行转换？

我正在开发一个 android 即时聊天应用程序。我已经成功实现了它的基本功能。现在，我使用库添加了一组表情符号compile 'com.rockerhieu.emojicon:library:1.3.3'。我在我的 XML 文件中使用 FrameLayout 来显示表情符号。

1.activity_chat.xml

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FCAB26"
    android:orientation="vertical"
    android:weightSum="1">

    <ListView
        android:id="@+id/list_view_messages"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight=".60"
        android:background="@null"
        android:divider="@null"
        android:stackFromBottom="true"
        android:transcriptMode="alwaysScroll"></ListView>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_weight=".10"
        android:orientation="horizontal"
        android:weightSum="1">

        <ImageView
            android:id="@+id/imgSmile"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".10"
            android:src="@drawable/ic_msg_panel_smiles"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="-10sp"/>

        <com.rockerhieu.emojicon.EmojiconEditText
            android:id="@+id/edtMessage"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:hint="Enter Message"
            android:layout_weight=".60"></com.rockerhieu.emojicon.EmojiconEditText>

        <Button
            android:id="@+id/btnSendMessage"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight=".30"
            android:gravity="center"
            android:onClick="onClick"
            android:text="Send Message" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/emojicons"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".30"
        android:visibility="gone" />

</LinearLayout>

即使在将可见性指定为消失后，FrameLayout 也占用了一些空间。

通过上述库显示表情符号面板的代码如下：

 // This method will set a panel of emoticons in the fragment
private void setEmojiconFragment(boolean useSystemDefault) {
    // Replacing the existing fragment having id emojicons with the fragment of emoticons library containing emoticons
    getSupportFragmentManager().beginTransaction().replace(R.id.emojicons, EmojiconsFragment.newInstance(useSystemDefault)).commit();
}

3.截图

在此处输入图像描述

正如您在屏幕截图中看到的，我有一个ImageView、一个EditText和发送消息按钮。单击ImageView时，将显示 emoji 面板，单击 EditText 时，emoji 键盘被隐藏并显示软键盘。以下代码处理此问题。

显示表情符号弹出窗口： 

public void showEmojiPopUp(boolean showEmoji) {
    FrameLayout frameLayout = (FrameLayout) findViewById(R.id.emojicons);
    frameLayout.setVisibility(View.VISIBLE);
}

隐藏软键盘： 

public void hideKeyboard() {
        InputMethodManager inputManager = (InputMethodManager) getSystemService(this.INPUT_METHOD_SERVICE);
        inputManager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
    }

我的问题是我希望表情符号键盘和软键盘占据相同的空间。一次只能看到一个。我想在表情符号键盘和软键盘之间进行转换。正如您在代码中看到的，我在FrameLayout中添加了表情符号键盘。我无法在这里使软键盘和表情符号键盘的大小相等。请帮我解决问题。

编辑代码： 我对我的代码进行了一些更改：

showEmojiPopUp() 方法：这里我们正在调整包含表情符号面板的 FrameLayout 的高度，以使软键盘和表情符号键盘的高度相同。

 public void showEmojiPopUp(boolean showEmoji) {
    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    deviceHeight = size.y;
    Log.e("Device Height", String.valueOf(deviceHeight));
    frameLayout = (FrameLayout) findViewById(R.id.emojicons);
    frameLayout.getLayoutParams().height = (int) (deviceHeight / 2.5); // Setting the height of FrameLayout
    frameLayout.requestLayout();
    frameLayout.setVisibility(View.VISIBLE);
    hideKeyboard();
}

2. hideKryboard() 方法

// Hiding the keyboard
public void hideKeyboard() {
    InputMethodManager inputManager = (InputMethodManager) getSystemService(this.INPUT_METHOD_SERVICE);
    inputManager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
}

它现在对我有用。

4

1 回答 1

1

我不确定是否有 javascript 做一些花哨的事情来使它工作，但这里有一个代码片段，可以帮助您了解如何使用从make.wordpress.org获取的 WP 4.4 中的响应式图像

<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">

注意：您可以在 functions.php 中将 'medium' 更改为其他 wordpress 默认大小，例如 'small'、'medium'、'large'、'full' 或自定义大小设置

注意 2：控制响应式工作方式的主要因素是 'sizes' 属性，它指定以什么宽度显示的内容。可以在本教程中找到更多信息

于 2016-01-22T03:55:13.233 回答